首页 > 代码库 > jQuery ajax - get(),getJSON(),post()方法
jQuery ajax - get(),getJSON(),post()方法
1) jQuery ajax - get() 方法:
$(selector).get(url,data,success(response,status,xhr),dataType)
参数 | 描述 |
url | 必需。规定将请求发送的哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
success(response,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数：
|
dataType | 可选。规定预计的服务器响应的数据类型。 默认地，jQuery 将智能判断。 可能的类型：
|
该函数是简写的 Ajax 函数，等价于：
$.ajax({url: url,
data: data,
success: success,
dataType: dataType
});
2) jQuery ajax - getJSON() 方法：
jQuery.getJSON(url,data,success(data,status,xhr))
参数 | 描述 |
url | 必需。规定将请求发送的哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
success(data,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数：
|
该函数是简写的 Ajax 函数，等价于：
$.ajax({url: url,
data: data,
success: callback,
dataType: “json”
});
3) jQuery ajax - post() 方法
4) jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
参数 | 描述 |
url | 必需。规定把请求发送到哪个 URL。 |
data | 可选。映射或字符串值。规定连同请求发送到服务器的数据。 |
success(data, textStatus, jqXHR) | 可选。请求成功时执行的回调函数。 |
dataType | 可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。 |
该函数是简写的 Ajax 函数，等价于：
$.ajax({type: ‘POST‘,
url: url,
data: data,
success: success,
dataType: dataType
});
实例：
1) get()
Html页面：
<script>
$(function(){
$("#btn").bind("click",function(){
var prov=$(".prov").val();
var city=$(".city").val();
var dist=$(".dist").val();
/*
*data的格式可以是：key1=value1&key2=value2
* 也可以是：{“key1”:”value1”,”key2”:”value2”}//单双引号也无妨
*/
var data="http://www.mamicode.com/prov="+prov+"&city="+city+"&dist="+dist;
// $.get("abc.php",{"prov":prov,"city":city,"dist":dist},function(json){
// $("#msg").html(json);
// });
$.get("abc.php",data,function(json){
$("#msg").html(json);
});
//等价于下面的ajax代码
/* $.ajax({
url: "abc.php",
data: data,
success: function(json){
$("#msg").html(json);
},
dataType:"text"//这里返回的类型有：json,html,xml,text
});
}); */
});
</script>
</head>
<body>
<div id="city">
<input type=”text” class="prov" value=http://www.mamicode.com/”河南”>
<input type=”text” class="city" value=http://www.mamicode.com/”安阳市”>
<input type=”text” class="dist" value=http://www.mamicode.com/”安阳县”>
</div>
<input id="btn" type="button" value="http://www.mamicode.com/提交">
<p id="msg" style="color:red;"></p>
</body>
abc.php页面：
<?php
$prov=$_GET["prov"];
$city=$_GET[‘city‘];
$dist=$_GET[‘dist‘];
$str=$prov.”<br>”.$city. ”<br>”.$dist;
echo $str;//输出的是字符串
?>
2)getJSON（注意返回的json数据必须满足json格式，返回的数据不是规范的json数据，回调函数不执行）
Html页面：
<script>
$(function(){
$("#btn").bind("click",function(){
var prov=$(".prov").val();
var city=$(".city").val();
var dist=$(".dist").val();
/*
*data的格式可以是：key1=value1&key2=value2
* 也可以是：{“key1”:”value1”,”key2”:”value2”}//单双引号也无妨
*/
var data="http://www.mamicode.com/prov="+prov+"&city="+city+"&dist="+dist;
$.getJSON("abc.php",data,function(json){
$("#msg").html(json.prov+json.city+json.dist);
});
//等价下面的ajax代码
/*$.ajax({
url: "abc.php",
data: data,
success: function(json){
$("#msg").html(json.prov+json.city+json.dist);
},
dataType:"json"
});*/
});
});
</script>
</head>
<body>
<div id="city">
<input type=”text” class="prov" value=http://www.mamicode.com/”河南”>
<input type=”text” class="city" value=http://www.mamicode.com/”安阳市”>
<input type=”text” class="dist" value=http://www.mamicode.com/”安阳县”>
</div>
<input id="btn" type="button" value="http://www.mamicode.com/提交">
<p id="msg" style="color:red;"></p>
</body>
</html>
abc.php页面：
<?php
$prov=$_GET["prov"];
$city=$_GET[‘city‘];
$dist=$_GET[‘dist‘];
$arr=array("prov"=>$prov,"city"=>$city,"dist"=>$dist);
echo json_encode($arr);//返回json数据
?>
3)post()
html页面：
<script>
$(function(){
$("#btn").bind("click",function(){
var prov=$(".prov").val();
var city=$(".city").val();
var dist=$(".dist").val();
/*
*data的格式可以是：key1=value1&key2=value2
* 也可以是：{“key1”:”value1”,”key2”:”value2”}//单双引号也无妨
*/
/* var data="http://www.mamicode.com/prov="+prov+"&city="+city+"&dist="+dist;
$.post("abc.php",data,function(json){
$("#msg").html(json.prov);
},"json");*/
$.post("abc.php",{"prov":prov,"city":city,"dist":dist},function(json){
$("#msg").html(json.prov);
},"json");//这里返回的类型有：json,html,xml,text
});
//等价于下面的ajax()
/*$.ajax({
type:"post",
url: "abc.php",
data: {‘prov‘:prov,‘city‘:city,‘dist‘:dist},
success: function(json){
$("#msg").html(json.prov);
},
dataType:"json"//这里返回的类型有：json,html,xml,text
});*/
});
</script>
</head>
<body>
<div id="city">
<input type=”text” class="prov" value=http://www.mamicode.com/”河南”>
<input type=”text” class="city" value=http://www.mamicode.com/”安阳市”>
<input type=”text” class="dist" value=http://www.mamicode.com/”安阳县”>
</div>
<input id="btn" type="button" value="http://www.mamicode.com/提交">
<p id="msg" style="color:red;"></p>
</body>
</html>
abc.php页面：
<?php
$prov=$_POST["prov"];
$city=$_POST[‘city‘];
$dist=$_POST[‘dist‘];
$arr=array("prov"=>$prov,"city"=>$city,"dist"=>$dist);
echo json_encode($arr);//输出的json格式数据
?>
参考：http://www.w3school.com.cn/jquery/ajax_post.asp
http://www.w3school.com.cn/jquery/ajax_get.asp
http://www.w3school.com.cn/jquery/ajax_getjson.asp
jQuery ajax - get(),getJSON(),post()方法