JQuery學習(5-AJAX1)
<?php /* * 保護AJAX請求的方式 */ /* * 1. 防止表單的自己主動提交 * 對表單的submit提交進行控制。
設置一個全局變量submitError,在進行驗證的方法體中對submitError進行改動。 * 若出錯，submitError++; 若錯誤更正submitError--；提交之前。若submitError=0,則進行提交 */ ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.5.min.js"></script> <style> .pwd{ width:200px; height:35px; } </style> <title>無標題文檔</title> </head> <body> <form id="rg_user" > <div> <input type="password" size="12" id="rg_pwd" class="pwd" /> <div id="error_info" ></div> </div> <input type="submit" /> </form> <script type="application/javascript"> var submtError=0; /* * 提交前驗證password是否為空 */ $('input[type="submit"]').click( function(){ var pwd_length=$('#rg_pwd').val().length; if(pwd_length==0){ $('#error_info').html("password為空"); submitError++; } if(submitError==0){ $('rg_user').submit( function(e){ e.preventDefault(); //序列化表單數據 var formData=$(this).serialize(); $.post('php.php',formData,function(data){ /*對server返回的數據進行操作*/ }); }); } } ) </script> </body> </html>
JQuery的使用策略：
首先是JQuery中Ajax的基礎使用方式：
$.ajax({
url: "ajax_php.php", //不須要加？
type: "POST",
data:{trans_data:my_data}, //能夠直接使用A=B&C=D
dataType: "json", //對應的，數據類型能夠寫成 text
error: function(){
alert('Error loading XML document');
},
success: function(data,status){ //假設調用php成功 ,這裏一般寫一個參數就能夠，表示接收的數據
alert(unescape(data));//解碼，顯示漢字
}
});能夠使用success的響應。來給頁面加入元素。也就是DOM操作。比方基礎使用append：
$('#id').append("<div id='table'></div>");在綁定元素這一塊，還須要介紹的是。要確保#id是存在的，比方說，你把這一段代碼寫到了html的開頭，你不管怎樣點擊，他都沒有你預期的操作，為什麽呢？由於Document還沒有載入這個元素，編譯在載入之前。（當然。這樣說我也不知道是否準確）
事實上。這個時候有一個隱患，就是每次異步。頁面都會追加一個節點div，這應該是我們不想看到的。我們肯定須要刪除之前追加的div了。可是，刪除節點的操作。是在$.ajax之前操作呢，還是在success函數內部首行操作呢，
比方說。調用ajax的是一個input元素的blur事件，例如以下
$('input').blur(function(){
$.ajax({});
})能夠在ajax之前加入也能夠在success追加節點之前加入，我認為加入到success還是更合理的。只是。也不能太片面，的結合需求，也許你的需求就是函數調用一次每次都的刪除，這樣就得保證ajax請求err的時候也能刪除掉追加的節點了。
$("#id1,#id2").remove();文檔說。刪了之後元素事實上在jquery對象中依然存在的。
僅僅說了client，也須要略微說一下server端，我們向server發送了數據。server通過$_POST之類的接收參數處理之後。怎麽返回數據呢？當然，非常多都應該試過了。使用echo【哎扣】。但這樣的方式無論怎麽。都感覺比較低端，沒水平，習慣使用echo返回text的數據。比方。client須要顯示一個radiobutton，但前提是server端的這個用戶是存在的，這時。我們就傳遞用戶信息到server端。當然使用的是text格式，server端經過處理之後，僅僅須要返回一個
echo 1;//是否顯示的Flg
然後就是追加節點了。須要註意的是，要確保echo之後不會再有其它的輸出。否則可能會有意想不到的情況，比方，異步返回了整個頁面的源碼。
怎樣指定數據的類型。說的比較寬泛了，事實上我就想記錄一下兩個屬性：
contentType: "application/json; charset=utf-8", dataType: "json",
我可能用到最多的是dataType屬性，官方解釋：client期望server端返回的數據類型。返回的json怎樣使用了，以下是抄襲別人的：也就是想說明。返回的json數據Jquery已經轉換成了json對象，能夠直接使用。
success: function( response )
{
$( "input[ name = type ]:eq( " + response.type + " )" ).attr( "checked", "checked" );
$( "input[ name = name ]" ).val( response.name );
$( "input[ name = fname ]" ).val( response.fname );
$( "input[ name = lname ]" ).val( response.lname );
$( "input[ name = email ]" ).val( response.email );
$( "input[ name = phone ]" ).val( response.phone );
$( "input[ name = website ]" ).val( response.website );
$( "#admin_member_img" ).attr( "src", "images/member_images/" + response.image );
}有必要說說data屬性了。data屬性。一般能夠這麽使用：
data:{
'name':'fh',
'age':'22'
}
當然也能夠這麽使用：可是以下的有時候不好使，事實上就是個人感覺不怎麽好使。並且。我發現假設用這樣的GET語句。firebug捕捉不到異步的請求，僅僅能使用抓包工具。這裏須要補充一點就是中文的問題，ajax提交跟form表單提交有差別，一般使用encodeURI這個js函數來包裝傳遞的值。
data:"name=fh&age=22"
說到異步請求。有時候非常能出問題。比方，我在$.ajax()後面，還有運行：
$ajax({});
console.log(....);這裏非常easy出問題。由於ajax是異步的請求，程序遇到了ajax它可能就把ajax放一邊運行去吧。接著運行console.log，一般來說，console.log（）這樣寫僅僅是例如，泛指ajax後面的操作。就是後面的操作運行一般在ajax之前完畢。這就easy被坑了，倘若我後面的代碼要用到ajax中返回的數據，那是肯定undefined了。
使ajax發送同步請求。默認屬性為true，這樣就發送同步請求了：
async :false
延續上面的。接著說contentType：官方說：當發送數據到server時。使用這樣的指定的數據類型，編碼
contentType: "application/json; charset=utf-8", contentType: "application/json",
server端怎麽返回，假設還是echo就有點蹩腳了，由於我們返回的時候沒有指定返回的文件類型。如今我們以返回json格式的數據來舉例。
<?這裏假設是在一個函數中，執行是能夠的。可是在全局執行的環境中，我還沒有試過。php $array=array(); $returnJsonStr=json_encode($array); header("Content-Type:appliation/json;charset=utf-8"); return $returnJsonStr ?>
return和exit在全局的環境中效果是一樣的。唯一差別是。exit是終止了全部腳本的執行。而return僅僅是終止了當前文件內腳本的執行。假設return在include文件裏引入，引用該文件的腳本並不會停止執行。
JQuery學習(5-AJAX1)