jQuery ajax

1)       jQuery ajax - get() 方法:

$(selector).get(url,data,success(response,status,xhr),dataType)

参数

描述

url

必需。规定将请求发送的哪个 URL。

data

可选。规定连同请求发送到服务器的数据。

success(response,status,xhr)

可选。规定当请求成功时运行的函数。

额外的参数:

  • response - 包含来自请求的结果数据
  • status - 包含请求的状态
  • xhr - 包含 XMLHttpRequest 对象

dataType

可选。规定预计的服务器响应的数据类型。

默认地,jQuery 将智能判断。

可能的类型:

  • "xml"
  • "html"
  • "text"
  • "script"
  • "json"
  • "jsonp"

该函数是简写的 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)

可选。规定当请求成功时运行的函数。

额外的参数:

  • response - 包含来自请求的结果数据
  • status - 包含请求的状态
  • xhr - 包含 XMLHttpRequest 对象

该函数是简写的 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="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=”河南”>

<input type=”text” class="city" value=”安阳市”>

  <input type=”text” class="dist" value=”安阳县”>

</div>

<input id="btn" type="button" value="提交">

<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="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=”河南”>

<input type=”text” class="city" value=”安阳市”>

  <input type=”text” class="dist" value=”安阳县”>

</div>

<input id="btn" type="button" value="提交">

<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="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=”河南”>

<input type=”text” class="city" value=”安阳市”>

  <input type=”text” class="dist" value=”安阳县”>

</div>

<input id="btn" type="button" value="提交">

<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

原文地址:https://www.cnblogs.com/Ann-wxp/p/4184594.html