Ajax方法
<!DOCTYPEhtml>
<htmllang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width,initial-scale=1.0″>
<title>Ajax</title>
<scriptsrc=”jquery-3.4.1.js”></script>
<style>
.body{
display:grid;
gap:15px;
}
.body>.button{
width:100px;
height:50px;
font-size:15px;
}
</style>
</head>
<body>
<buttontype=”button”>load()请求数据</button>
<buttontype=”button”>$.get()</button>
<buttontype=”button”>$.post()</button>
<buttontype=”button”>$.getJSON()请求JSON数据</button>
<buttontype=”button”>$.get()</button>
<buttontype=”button”>6.$.ajax()-jsonp-跨域请求数据1</button>
<buttontype=”button”>7.$.ajax()-jsonp-跨域请求数据2</button>
</body>
</html>
<script>
//1.load():加载html片断
$(“button:first-of-type”).click(function(){
$(this).after(“<div>”).next().load(“nav.html”);
});
//2.get():以get方式从服务器获取数据
$(“button:nth-of-type(2)”).click(function(ev){
$.get(“users.php“,{id:2},function(data){
$(ev.target).after(“<div>”).next().html(data);
});
});
//3.post():以post方式从服务器获取数据
$(“button:nth-of-type(3)”).click(function(ev){
$.post(“users.php”,{id:2},function(data){
$(ev.target).after(“<div>”).next().html(data);
});
});
//4.$.getJSON():接口返回的大多是JSON
$(“button:nth-of-type(4)”).click(function(ev){
$.getJSON(“users.php?id=2″,function(data){
varres=data.id+”:”+data.name+”,”+data.age+”岁”;
$(ev.target).after(“<div>”).next().html(res);
});
});
//5.$.ajax():终级方法,实际上大家只需要掌握这一个方法
$(“button:nth-of-type(5)”).click(function(ev){
$.ajax({
type:”GET”,
url:”users.php”,
data:{id:2},
dataType:”html”,
success:function(data){
$(ev.target).after(“<div>”).next().html(data);
},
});
});
//6.$.ajax()-jsonp-1:跨域请求
$(“button:nth-of-type(6)”).click(function(ev){
$.ajax({
type:”GET”,
url:”http://php11.demo/0527/test.php?jsonp=?&id=2″,
dataType:”jsonp”,
success:function(data){
cl(data);
vardata=JSON.parse(data);
cl(data);
vardata=
“<p>”+
data.title+
“</p><p>”+
data.user.name+
“,邮箱:”+
data.user.email+
“</p>”;
$(ev.target).after(“<div>”).next().html(data);
},
});
});
//7.$.ajax()-jsonp-2:跨域请求
$(“button:last-of-type”).click(function(ev){
$.ajax({
type:”GET”,
url:”http://php11.demo/0527/test.php?jsonp=?&id=2″,
dataType:”jsonp”,
jsonpCallback:”handle”,
});
});
functionhandle(data){
cl(data);
vardata=JSON.parse(data);
cl(data);
vardata=
“<p>”+
data.title+
“</p><p>”+
data.user.name+
“,邮箱:”+
data.user.email+
“</p>”;
$(“button:last-of-type”).after(“<div>”).next().html(data);
}
</script>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com
">