<!--這里的min是自己用js壓縮工具對完整版進行的壓縮
并不是真正的min，所以好使-->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

<form id="showDataForm" 
action="/024pm/f_shopUser.do?method=login" method="post">
 <input type="text" value="" name="name" maxlength="2"/>
 <input type="password" value="" name="password" maxlength="2"/>
 <input type="submit" value="提交"/>
</form>
<div id="output1" 
style="width:1000px;height:200px;background-color:#eee;">
</div>

$(document).ready(function() {
 var options = {
  target: '#output1',
  // 從服務(wù)傳過來的數(shù)據(jù)顯示在這個div內(nèi)部
 也就是ajax局部刷新
  beforeSubmit: showRequest,
 // ajax提交之前的處理
  success:  showResponse
 // 處理之后的處理
 };
 $('#showDataForm').submit(function() {
  $(this).ajaxSubmit(options);
  return false; 
  //非常重要，如果是false，則表明是不跳轉(zhuǎn)
  //在本頁上處理，也就是ajax，如果是非false，則傳統(tǒng)的form跳轉(zhuǎn)。
 });
});
function showResponse(responseText, statusText, xhr, $form) {
 alert(xhr.responseText+"=="+$form.attr("method")+'status: ' + 
 statusText + '\n\nresponseText: \n' + responseText);
//xhr：說明你可以用ajax來自己再次發(fā)出請求
//$form：是那個form對象，是一個jquery對象
//statusText：狀態(tài)，成功則為success
//responseText，服務(wù)器返回的是字符串（當然包括html，不包括json）
}
function showRequest(formData, jqForm, options) {
 //formData是數(shù)組，就是各個input的鍵值map數(shù)組
 //通過這個方法來進行處理出來拼湊出來字符串。
 //formData：拼湊出來的form字符串，比如name=hera&password，
 //其實就是各個表單中的input的鍵值對，
 //如果加上method=XXXX，那也就是相當于ajax內(nèi)的data。
 var queryString = $.param(formData);
 alert(queryString+"======"+formData.length);
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"==============="+formData[i].name);
 }
 //jqForm，jquery form對象
 var formElement = jqForm[0];
 alert($(formElement).attr("method"));
 alert($(jqForm[0].name).attr("maxlength"));
 //非常重要，返回true則說明在提交ajax之前你驗證
 //成功，則提交ajax form
 //如果驗證不成功，則返回非true，不提交
 return true;
}

var options = {
 target: '#output1', 
 data:{param1:"我自己的第一個額外的參數(shù)"},
//這個參數(shù)是指通過ajax來給服務(wù)器提交除了form內(nèi)部input的參數(shù)
//在后臺中使用String param1=req.getParameter("param1");獲取。
 // dataType: null,
 dataType:'json',
//這個參數(shù)值的是服務(wù)器返回的數(shù)據(jù)類型，默認的是null
//也就是服務(wù)器可以默認返回字符串，然后將這些字符串放在target內(nèi)部
//當然還有json、xml，其中最常用的便是null和json
//對于json的使用，我們會稍后講解到
 beforeSubmit: showRequest,
 success:  successRes，
 type：'POST'
 //提交方式，默認是自己在form標簽上指定的method
 //如果沒有指定，則使用get。
 url：''
 //重新提交的url，即url可以在form中配置
 //也可以在這里配置。
};

var options = {
 target: '#output1', 
 dataType:'json',
 beforeSubmit: showRequest,
 success:  successRes
//注意了，successRes方法看起來并沒有有參數(shù)
//但是為何下面的方法就能有參數(shù)了呢，是可以這么傳遞的。
function successRes(jsonData){
 alert(jsonData.param1);
}

function showRequest(formData, jqForm, options) {
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"========"+formData[i].name);
 if (!formData[i].value) {
  //驗證是否填寫完整
  alert('input有沒有填寫的選項');
  //如果驗證不通過，則返回false
  return false;
 }
 }
 var formElement = jqForm[0];
 alert($(jqForm[0].name).attr("maxlength"));
 return true;
}