jQuery——ajax请求 和 API 接口调用
通过以下简单案例 了解 jQuery 中如何发送 ajax 请求,接收并处理数据:HTML代码:<span>手机号码:</span><input type="text" id="tel" value="13772354675"/><button id="search">查询</button><div class="content"&
·
通过以下简单案例 了解 jQuery 中如何发送 ajax 请求,接收并处理数据:
HTML代码:
<span>手机号码:</span><input type="text" id="tel" value="13772354675"/>
<button id="search">查询</button>
<div class="content">
<div> 省份:<span id="s1"></span></div>
<div> 城市:<span id="s2"></span></div>
<div> 区号:<span id="s3"></span></div>
<div> 邮编:<span id="s4"></span></div>
<div> 运营商:<span id="s5"></span></div>
</div>
JavaScript代码:
<script src="js/jquery-1.9.1.js"></script>
<script>
$("#search").click(function () {
if ($("#tel").val() == "") {
alert("请输入手机号码!");
}
else {
if (!/^1[3456789]\d{9}$/.test($("#tel").val())) {
alert("请输入正确的手机号码")
}
else {
//发送ajax请求
$.ajax({
type: "get",
data: {phone: $("#tel").val(), key: "a4c5e262635e416aff0b05fb5425f753"},
url: "http://apis.juhe.cn/mobile/get",
//处理跨域问题
dataType: "jsonp",
jsonpCallback: "getData",
//接收数据
success: function (res) {
$("#s1").text(res.result.province);
$("#s2").text(res.result.city);
$("#s3").text(res.result.areacode);
$("#s4").text(res.result.zip);
$("#s5").text(res.result.company);
}
})
}
}
})
</script>
注意:
传送数据的格式 ——参考 api 使用手册;
调用api时注意跨域问题。
更多推荐
已为社区贡献1条内容
所有评论(0)