ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery Ajax の使用例_jquery

jQuery Ajax の使用例_jquery

WBOY
WBOYオリジナル
2016-05-16 16:03:461169ブラウズ

Jquery は非同期送信を非常にうまくカプセル化します。AJAX を直接使用すると、ブラウザーの違いを考慮せずに操作が大幅に簡素化されます。

$.post と $.get は単純なメソッドです。複雑なロジックを処理したい場合は、やはり jQuery.ajax() を使用する必要があります。
1. $.ajax の一般的な形式

$.ajax({
   type: 'POST',
   url: url ,
  data: data ,
  success: success ,
  dataType: dataType
});

2. $.ajax

のパラメータの説明

パラメータの説明
URLは必須です。リクエストの送信先となる URL を指定します。
データはオプションです。マップまたは文字列値。リクエストとともにサーバーに送信されるデータを指定します。
success(data, textStatus, jqXHR) オプション。リクエストが成功したときに実行されるコールバック関数。
dataType はオプションです。予想されるサーバー応答のデータ型を指定します。
デフォルトでインテリジェントな判断が行われます (xml、json、script、または html)。
3. $.ajax について注意すべき点:

1. データの主な方法は HTML スプライシング、JSON 配列、dataType で指定された Serialize() による形式の 3 つで、インテリジェントな判断は指定されていません。

2.$.ajax はテキスト モードでのみフォームを送信します。非同期送信に が含まれる場合、アップロードを渡すことができません。jquery.form.js

の $.ajaxSubmit を使用する必要があります。

4. $.ajax の実際の応用例

//1.$.ajax带json数据的异步请求 
var aj = $.ajax( {  
  url:'productManager_reverseUpdate',// 跳转到 action  
  data:{  
       selRollBack : selRollBack,  
       selOperatorsCode : selOperatorsCode,  
       PROVINCECODE : PROVINCECODE,  
       pass2 : pass2  
  },  
  type:'post',  
  cache:false,  
  dataType:'json',  
  success:function(data) {  
    if(data.msg =="true" ){  
      // view("修改成功!");  
      alert("修改成功!");  
      window.location.reload();  
    }else{  
      view(data.msg);  
    }  
   },  
   error : function() {  
     // view("异常!");  
     alert("异常!");  
   }  
}); 
 
 
//2.$.ajax序列化表格内容为字符串的异步请求 
function noTips(){  
  var formParam = $("#form1").serialize();//序列化表格内容为字符串  
  $.ajax({  
    type:'post',    
    url:'Notice_noTipsNotice',  
    data:formParam,  
    cache:false,  
    dataType:'json',  
    success:function(data){  
    }  
  });  
}  
 
 
//3.$.ajax拼接url的异步请求 
var yz=$.ajax({  
   type:'post',  
   url:'validatePwd2_checkPwd2?password2='+password2,  
   data:{},  
   cache:false,  
   dataType:'json',  
   success:function(data){  
     if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间  
     {  
        textPassword2.html("<font color='red'>业务密码不正确!</font>");  
        $("#validatePassword2").val("pwd2Error");  
        checkPassword2 = false;  
        return;  
      }  
   },  
   error:function(){}  
});  
 
 
//4.$.ajax拼接data的异步请求 
$.ajax({   
  url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',   
  type:'post',   
  data:'merName='+values,   
  async : false, //默认为true 异步   
  error:function(){   
    alert('error');   
  },   
  success:function(data){   
    $("#"+divs).html(data);   
  } 
}); 

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。