通过以下简单案例 了解 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时注意跨域问题。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐