Heim > Web-Frontend > js-Tutorial > Detaillierte Einführung in die ajax()-Methode in jQuery

Detaillierte Einführung in die ajax()-Methode in jQuery

黄舟
Freigeben: 2017-07-27 16:25:04
Original
1391 Leute haben es durchsucht

$.ajax()-Methode:

* Es gibt drei Hauptmethoden zum Senden von Daten
* 1.json-Array (empfohlen 1 )
* 2.URL-Spleißen
* 3. Serialisieren Sie das Formular (empfohlen 2)

(1) JSON-Array (empfohlen 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>
Nach dem Login kopieren

(2)URL-Splicing

$(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>
Nach dem Login kopieren

(3) Serialisieren Sie das Formular (empfohlen 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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die ajax()-Methode in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage