Maison > Article > interface Web > Introduction détaillée à la méthode ajax() dans jQuery

Introduction détaillée à la méthode ajax() dans jQuery

黄舟original: 2017-07-27 16:25:041366parcourir

Méthode $.ajax() :

* Il existe trois façons principales d'envoyer des données
* Tableau 1.json (recommandé 1)
* 2. Épissage d'URL
* 3. Sérialisation du formulaire (recommandé 2)

(1) tableau json (1 recommandé)

<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) épissage d'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) Sérialiser le formulaire (recommandé 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la façon dont jQuery obtient la balise td dans le tableauArticle suivant：Explication détaillée de la façon dont jQuery obtient la balise td dans le tableau

Articles Liés

Voir plus