zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Centos服务器搭建(3)——安装maven
    Centos服务器搭建(2)——安装tomcat
    Centos服务器搭建(1)——安装jdk
    mysql主从复制
    Json中返回换行符处理
    github pages 绑定域名
    SharePoint学习笔记——子页面
    SharePoint学习笔记——母版页
    SSH+Oracle的整合(SSH与Oracle整合坑巨多)
    SSH整合做CRUD(大神老师整理)
  • 原文地址:https://www.cnblogs.com/Ann-wxp/p/4184594.html
Copyright © 2011-2022 走看看