首頁 > web前端 > js教程 > jQuery中ajax()方法的詳細介紹

jQuery中ajax()方法的詳細介紹

黄舟
發布: 2017-07-27 16:25:04
原創
1391 人瀏覽過

$.ajax()方法:

##*  發送data主要有3種方式
*  1.json 陣列(建議1 )
*  2.url拼接
*  3.表單的序列化serialize(建議2)## 

(1)json 陣列(推薦1)

<span style="font-size: 16px;"><strong><span style="color: #000000;">$(function(){
    var myClick = function(){
    var userName = $().val();
    var myDate = {userName:usrName};
    var myFunction = function(result){alert(result)};
    var eeorFunction = function(){alert("发生异常")};
    
    $.ajax({
          url:&#39;B&#39;,//目标为Servlet B发送请求地址
          type:&#39;GET&#39;,/*访问Servlet B请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。*/
          date:myDate,//把信息提交给Servlet数据
          dateType:&#39;text&#39;,//返回类型为文本类型
         success:myFunction,//成功后的回调函数,result为服务器返回的内容
         error:errorFunction,
         timeout:2000<br/><br/>      /*<br/>        $.ajax()以上7个方法都是常用方法。<br/>      */
    });
    }
    $("#img").click(myClick);
});         

</span><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="userName"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="userName"</span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="xiaoming"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="img"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="img/1.png"</span><span style="color: #0000ff;">></span>   <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></strong></span>
登入後複製

(2)url拼接

$(function(){
    var myClick = function(){
    var userName = $().val();
    var myDate = {userName:usrName};
    var myFunction = function(result){alert(result)};

    /*var eeorFunction = function(){alert("发生异常")};*/
    var errorFunction = function(XMLHttpRequest,textStatus){
    //alert(&#39;发生错误&#39;);
    if (XMLHttpRequest.status==404){
    alert(&#39;找不到服务器[404]&#39;);
    } else if(XMLHttpRequest.status==500){
    alert(&#39;服务器忙,请稍后再试[500]&#39;);
    }else{
    alert(&#39;服务器错误[&#39;+XMLHttpRequest.status+&#39;]&#39;);
    }
   } 
    $.ajax({
          url:&#39;B?userName=&#39;+$("#userName").val(),//目标为Servlet B发送请求地址

          type:&#39;GET&#39;,/*访问Servlet B请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。*/
          date:myDate,//把信息提交给Servlet数据
          dateType:&#39;text&#39;,//返回类型为文本类型
         success:myFunction,//成功后的回调函数,result为服务器返回的内容
         error:errorFunction,
         timeout:2000
    });
    }
    $("#img").click(myClick);
});         

<body>
    <form>
      <input id="userName" name="userName"value="xiaoming"><br>
      <img id="img" src="img/1.png">   

          </form></body>
登入後複製

############################################################# ###(3) 表單的序列化serialize(推薦2)######
$(function(){

    var kk = $("#userName").serialize();
    var tt = $("#frm1").serialize();
    //alert(t    //var myClick = function    //var userName = $().val();
  //var myDate = {userName:usrName};    

     var myFunction = function(result){alert(result)};
    /*var eeorFunction = function(){alert("发生异常")};*/
   var errorFunction = function(XMLHttpRequest,textStatus){
    //alert(&#39;发生错误&#39;);
    if (XMLHttpRequest.status==404){
    alert(&#39;找不到服务器[404]&#39;);
    } else if(XMLHttpRequest.status==500){
    alert(&#39;服务器忙,请稍后再试[500]&#39;);
    }else{
    alert(&#39;服务器错误[&#39;+XMLHttpRequest.status+&#39;]&#39;);
    }
   } 
    $.ajax({
          url:&#39;B?userName=&#39;+$("#userName").val(),//目标为Servlet B发送请求地址

          type:&#39;GET&#39;,/*访问Servlet B请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。*/
          date:myDate,//把信息提交给Servlet数据
          dateType:&#39;text&#39;,//返回类型为文本类型
         success:myFunction,//成功后的回调函数,result为服务器返回的内容
         error:errorFunction,
         timeout:2000
    });
    }
    $("#img").click(myClick);
});         

<body>
    <form>
      <input id="userName" name="userName"value="xiaoming"><br>
    <input id="sex" name="sex" value="男"><br>
    <img id="img" src="img/1.png">   </form></body>
登入後複製

以上是jQuery中ajax()方法的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板