ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery Ajax の使用例_jquery
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 はテキスト モードでのみフォームを送信します。非同期送信に
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); } });