给出<选项>标记一个类?API调用不工作
Giving a <option> tag a class? API call is not working
我正在使用AJAX和JavaScript/jQuery练习API调用。我目前正在使用随机用户API(https://randomuser.me/)。出于某种原因,当我尝试按国籍调用用户时,AJAX调用无法正确执行。我想知道是不是因为我给标签上了"国籍"的分类?起初,我给这门课贴了标签,但我觉得这不太正确。我哪里错了?我打电话给的每个用户都是澳大利亚人,因为这个国籍恰好是名单上的第一位。有人能给我一些关于如何正确调用API的提示吗?
这是我的HTML:
<h1> Random Person Generator </h1>
<div class = "info">
<p> Generate a Random Person! </p>
<form class = "zipform">
<p> Nationality? </p>
<select name = "nationality">
<option value = "au" class ="nationality">Australian</option>
<option value = "br" class ="nationality">Brazilian</option>
<option value = "ca" class ="nationality">Canadian</option>
<option value = "ch" class ="nationality">Swiss</option>
<option value = "de" class ="nationality">German </option>
<option value = "dk" class ="nationality">Norweigan </option>
<option value = "es" class ="nationality"> Spanish </option>
<option value = "fi" class ="nationality">Finnish</option>
<option value = "fr" class ="nationality">French</option>
<option value = "gb" class ="nationality">British </option>
<option value = "us" class ="nationality">American </option>
<option value = "nl" class ="nationality">Dutch </option>
<option value = "nz" class ="nationality">New Zealander </option>
<option value = "tr" class ="nationality">Turkey</option>
</select>
<button type = "submit" class = "pure_button"> Search </button>
<input type="reset" value="Reset">
</form>
<div class = "rando_facts">
<p id = "intro"> </p>
<p id = "name"> </p>
</div>
</div>
我的JS/jQuery:
$('.pure_button').click(function(e) {
e.preventDefault()
console.log("click noticed")
$.ajax({
url: "http://api.randomuser.me" + "/?nat=" + $('.nationality').val(),
type: "GET",
success: function(data) {
console.log("This works too")
debugger
console.log(data)
$('#intro').text("Presenting...")
var firstName = data.results[0].name.first
var lastName = data.results[0].name.last
$('#name').text("Name: " + firstName + " " + lastName)
}
});
});
JSFIDDLE演示-更改国家/地区并点击搜索按钮查看结果
要获得您选择的选项,请使用此选项。如果您只使用类和.val()
,您将始终获得第一个选项。
url: "http://api.randomuser.me" + "/?nat=" + $("[name=nationality]").find("option:selected" ).text(),
相关文章:
- RxjsObservable:通过一个API调用订阅不同的值
- 是否有一个 API 来控制火狐附加组件 SDK 中的下载
- 我开发了一个api,我希望它重定向到其他php页面,并在我点击api文件中的按钮时弹出模态
- 从 API 中调用另一个 API
- 我有一个API,我想从api响应中获取数据
- 如何在angularjs中使用第一个api的结果,进入第二个api调用
- 任何只有一个API支持桌面和移动的Javascript框架
- 向一个API发出多个请求,该API每分钟只能处理20个请求
- 一个API服务限制我或我的巨型循环对于我的POST请求来说太快了
- jQuery插件-提供一个API
- 从另一个API调用谷歌地图信息窗口
- 使用一个API调用检索ember数据关系
- 渲染没有被一个API调用,而被另一个API调用
- Angellist API访问-注册一个API
- 是否有一个API来获得Chrome扩展用户的谷歌帐户
- 承诺一个API
- 我如何使用已由另一个api设置的变量,在我的javascript函数
- 是否有一个API为chrome://web内部/变量在javascript
- 从PhantomJS启动另一个API
- 如何创建一个API来抓取特定的网页