jQuery提交表單ajax查詢實現代碼(1/2)

ajax() 方法通過 HTTP 要求載入遠端資料。

該方法是 jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。

最簡單的情況下，$.ajax() 可以不帶任何參數直接使用。

一：Url參數提交資料

代碼如下

複製代碼

<script type ="text/javascript" src ="../js/jquery.js"></script> <script type="text/javascript">         function checkCorpID()//檢測客戶編碼是否可用         {             if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客戶編碼輸入框             {                 alert("請輸入客戶編碼!");             }             else             {                 $("#checkFlag").html("正在檢測");//顯示提示資訊                 $.ajax({                  type: "get",                  url: "CheckCorpID.ashx",                  data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表單，相當於CheckCorpID.ashx?ID=XXX                  success: function(msg){$("#checkFlag").html("");alert(  msg ); }   //操作成功後的操作！msg是後台傳過來的值                 });             }         } </script>

幕後處理代碼

代碼如下

複製代碼

if(context.Request.Params["ID"].ToString()!="") {             Pxt.Logic.SYS.CORP_BASE_INFO cbiL = new Pxt.Logic.SYS.CORP_BASE_INFO();             bool flag=cbiL.checkCorpID(context.Request.Params["ID"].ToString());             if (flag)             {                 context.Response.Write("該客戶編碼已被佔用!");             }             else             {                 context.Response.Write("該客戶編碼可用!");             } }

準系統：使用者輸入一個表單，輸入准考證和驗證碼，驗證使用者是否輸入表單，點擊查詢提交，然後從伺服器得到返回的資料並顯示出來

jquery代碼

代碼如下

複製代碼

function LoginSuccess() {           $.ajax({               type: "POST",               url: "/zk/zkcj201204a",               data: { ksbh: $("#ksbh").val()},               beforeSend: function() { $("#msg").html("loading......正在提交請稍候。"); },               success: function(data) {                   $("#msg").html(data).show();                   document.getElementById("valiCode").src = document.getElementById("valiCode").src+'?';               }           });       } html代碼 <div id="lmain"> <div><span class="s1">准考證號：</span><span class="s2"><input id="ksbh" maxlength="12" name="ksbh" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))" onkeyup="value=value.replace(/[^d]/g,'')" type="text" value="" /></span></div> <div><span class="s1">驗證碼：</span><span class="s3"><input id="Yzm" name="Yzm" type="text" value="" /><img id="valiCode" style="cursor: pointer;height:22px; line-height:22px; vertical-align:middle;" src="../Validate/GetValidateCode" onclick="this.src=this.src+'?'" alt="看不清？點擊更換" /></span></div> <div style=" text-align:center;"><input type="button" id="btnSubmit" value="查詢" /> </div>  </div> <div id="msg" style=" width:600px;text-align:center; margin-top:20px;"></div>

參數
options
類型：Object

可選。AJAX 請求設定。所有選項都是可選的。

async
類型：Boolean

預設值: true。預設設定下，所有請求均為非同步請求。如果需要發送同步請求，請將此選項設定為 false。

注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。

beforeSend(XHR)
類型：Function

發送請求前可修改 XMLHttpRequest 對象的函數，如添加自訂 HTTP 頭。

XMLHttpRequest 對象是唯一的參數。

這是一個 Ajax 事件。如果返回 false 可以取消本次 ajax 請求。

cache
類型：Boolean

預設值: true，dataType 為 script 和 jsonp 時預設為 false。設定為 false 將不緩衝此頁面。

jQuery 1.2 新功能。

complete(XHR, TS)
類型：Function

請求完成後回呼函數 (請求成功或失敗之後均調用)。

參數： XMLHttpRequest 對象和一個描述請求類型的字串。

這是一個 Ajax 事件。

contentType
類型：String

預設值: "application/x-www-form-urlencoded"。發送資訊至伺服器時內容編碼類別型。

預設值適合大多數情況。如果你明確地傳遞了一個 content-type 給 $.ajax() 那麼它必定會發送給伺服器（即使沒有資料要發送）。

context
類型：Object

這個對象用於設定 Ajax 相關回呼函數的上下文。也就是說，讓回呼函數內 this 指向這個對象（如果不設定這個參數，那麼 this 就指向調用本次 AJAX 請求時傳遞的 options 參數）。比如指定一個 DOM 元素作為 context 參數，這樣就設定了 success 回呼函數的上下文為這個 DOM 元素。

首頁 1 2 末頁