blog-API-用法

发布于 2021-09-01  23 次阅读


html,php,JavaScript,从未接触过... 因为真的是太方便了.. 所以还是尝试学习了一下..

准备工作

jQuery 简单了解下工作原理

JavaScript 函数了解下.

API 提供商 - 木小果API - 首页API-聚合

参考资料

jQuery html() 方法

ajax提交form表单方法

ajax使用方法

中途遇见了一个问题,困扰了好久。

Uncaught ReferenceError: $ is not defined

原因是 jquery.min.js 文件路径问题.. 替换成本地正确,或者.url 路径..即可..

相关代码

HTML部分:

<span>手机号码:</span><input type="text" id="tel" value=""/>
<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="./jquery.min.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: {tel: $("#tel").val(), appkey: "your Key"},
                    url: "https://api.muxiaoguo.cn/api/chePhone/",
                    //处理跨域问题
                    dataType: "jsonp",
                    jsonpCallback: "getData",
                    //接收数据
                    success: function (data) {
					$("#s1").text(data.data.province);
					$("#s2").text(data.data.city);
					$("#s3").text(data.data.prefix);
					$("#s4").text(data.data.operator);
					$("#s5").text(data.data.location);
                    }
                })
            }
        }
    })
</script>

格式

<html>
	<head>
		...
	</head>
	
	<body>
		...
	</body>
</html>

效果图

电话查询->

输入一个电话号.点击查询.

嗯.. 虽然没什么大用... 只是学习,测试, 挂载API的方法..重在过程..