jQuery中的$.getJSON、$.ajax、$.get、$.post的区别
使用见Flask(python)异步(ajax)返回json格式数据
①.$.getJSON
$.getJSON()是专门为ajax获取json数据而设置的,并且支持跨域调用,其语法的格式为:
getJSON(url,[data],[callback])
- url:string类型, 发送请求地址
- data :可选参数, 待发送 Key/value 参数 ,同get,post类型的data
- callback :可选参数,载入成功时回调函数,同get,post类型的callback
$.getJSON("{{ url_for('form_data') }}",params, function (result) {
$("#myDiv").append("hello world1");
console.log(obj.username + "<br>");
});
②.$.ajax
$.ajax
是 jQuery 底层 AJAX 实现,$.ajax
是一种通用的底层封装,$.ajax(
)请求数据之后,则需要使用回调函数,有beforeSend、error、dataFilter、success、complete等。
格式:
$.ajax({
url:”路径”,
type:”post/get”,
datatype:”json”,
//成功的回调函数
success:function(data){
alert(“回调函数成功了”);
},
//失败的回调函数
error:function(){
alert(“服务器请求失败”);
},
//发送请求前调用,可以放一些“正在加载”之类的话
beforeSend:function(){
alert(“正在加载”);
}
});
例如:
$.ajax({
"url": "{{ url_for('form_data') }}",
"type": "POST",
"data": params,
"success": function (obj) {
$("#myDiv").append("hello world")
console.log(obj.username + "<br>")
},
"error": function (obj) {
console.log(obj)
},
"dataType": "json",
"async": true
});
③.$.get
$.get
是简单易用的高层实现,我们使用$.get
方法,jQuery会自动封装调用底层的$.ajax
。
$.get
只处理简单的 GET 请求功能以取代复杂 $.ajax
,请求成功时可调用回调函数。不支持出错时执行函数,否则必须使用$.ajax
。
$.get( url ,[data] ,[callback] )
- url:string类型,ajax请求的地址。
- data:可选参数,object类型,发送至服务器的key/value数据会作为QueryString附加到请求URL中。
- callback:可选参数,function类型,当ajax返回成功时自动调用该函数。
例如:
$.get("{{ url_for('form_data') }}", params, function (obj) {
$("#myDiv").append("hello world")
console.log(obj.username + "<br>");
}, "json");
④.$.post
$.post
是简单易用的高层实现,我们使用$.post
方法,jQuery会自动封装调用底层的$.ajax
。
$.post
只处理 post请求功能以取代复杂 $.ajax
。请求成功时可调用回调函数。不支持出错时执行函数,否则必须使用$.ajax
。
$.post(url,[data],[callback],[type])
这个方法和$.get()用法差不多,唯独多了一个type参数,那么这里就只介绍type参数吧,其他的参考上面$.get()的。
- type:type为请求的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和.get()返回的格式一样,都是字符串的。
例如:
$.post("{{ url_for('form_data') }}", params, function (obj) {
$("#myDiv").append(obj.username + "<br>")
console.log(obj);
}, "json");