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>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。