明霞山资源网 Design By www.htccd.com
前言：ajax和jsonp可以与后台通信，获取数据和信息，但是又不用刷新整个页面，实现页面的局部刷新。
一、ajax
"htmlcode">
$(function () {
$("input").click(function () {
$.ajax({
url: "./data.json",
type: "get",
dataType: "json",
});
.done(function(data) {//请求成功的回调函数
$("input").val(dat.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>
说明：data表示后台返回的数据；ajax使用需要依赖服务器环境。
2. $.get():
"htmlcode">
//参考代码：
$(function () {
$("input").click(function () {
$.get(
"./data.json",
function (data,status) {
console.log(data.name);
},
"json"
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>
""success","error","timeout"等几种。
"htmlcode">
$(function () {
$("input").click(function () {
$(".box").load(
"./data.json",
function (response,status) {
console.log(data.name);
}
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
<div class="box"></div>
</div>
</body>
"htmlcode">
$(function () {
$("input").click(function () {
$.getJSON(
"./data.json",
function(data,status) {
console.log(data.name);
},
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>
"htmlcode">
$(function () {
$("input").click(function () {
$.getScript(
"./data.js",
function(data,status) {
console.log(data);
},
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>
"color: #ff0000">二、jsonp
"htmlcode">
<script type="text/javascript">
function aa(data){
console.log(data.name);
}
</script>
<script type="text/javascript" src="/UploadFiles/2021-04-02/data.js">
说明：在外部定义一个data.js文件，这个文件的路径可以与当前页面不在同一个域下面。
data.js的内容：
aa({
"data":{
"name":"xiaohong",
"age":"18"
}
})
"htmlcode">
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式访问
jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
console.log(data.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
"htmlcode">
var $input = $("input");
$input.keyup(function () {
$.ajax({
url:'https://sug.so.360.cn/suggest"text">
</body>
•通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。
•服务器返回的数据会自动传给回调的匿名函数的参数data.
总结
以上所述是小编给大家介绍的Ajax和jsonp使用总结，需要的朋友参考下
标签：
ajax,和jsonp,使用
明霞山资源网 Design By www.htccd.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...