如何手寫(xiě)Ajax實(shí)現(xiàn)異步刷新

2024-09-01 08:27:06

字體：大中小

供稿：網(wǎng)友

所謂的異步刷新，就是不刷新整個(gè)網(wǎng)頁(yè)進(jìn)行更新數(shù)據(jù)。

只有通過(guò)js才能實(shí)現(xiàn)Ajax，進(jìn)而實(shí)行異步刷新

表單提交數(shù)據(jù)和Ajax提交數(shù)據(jù)的區(qū)別：表單提交是提交的整個(gè)頁(yè)面中的數(shù)據(jù)，提交數(shù)據(jù)之后會(huì)拋棄之前的頁(yè)面(刷新頁(yè)面)；ajax是在當(dāng)前頁(yè)面提取某些數(shù)據(jù)并提交出去，并能接收返回來(lái)的數(shù)據(jù)，處理之后進(jìn)而顯示在當(dāng)前頁(yè)面(不刷新頁(yè)面)。

【例子】==驗(yàn)證用戶名是否重復(fù)==　　

使用Ajax的思路：在要刷新的頁(yè)面中寫(xiě)js和Ajax代碼，把數(shù)據(jù)提交給另一個(gè)頁(yè)面，在Page_Load中寫(xiě)查詢代碼并把結(jié)果返回到刷新的頁(yè)面。　　

界面

一、使用Linq連接數(shù)據(jù)庫(kù)

二、把jquery文件導(dǎo)入到項(xiàng)目中。代碼寫(xiě)在<head>中　　

<script src="js/jquery-1.2.3.pack.js" type="text/javascript"></script>

三、在刷新的頁(yè)面寫(xiě)如下代碼。代碼寫(xiě)在<head>中

<script src="js/jquery-1.2.3.pack.js" type="text/javascript"></script> <%--調(diào)用jquery--%>  <script>  $(document).ready(//當(dāng)頁(yè)面準(zhǔn)備好加載完成的時(shí)候觸發(fā)   function getval() {    $("#TextBox1").blur(function () {//當(dāng)鼠標(biāo)點(diǎn)擊或離開(kāi)時(shí)觸發(fā)     var txt = $(this).val();//獲取文本框的值       //使用ajax發(fā)送出來(lái)文本框的值           $.ajax( {      url: "De.aspx",      type: "POST",      data: {id:txt},        //接收數(shù)據(jù)庫(kù)返回的信息      datatype: "xml",      success: function (data) {//data中的數(shù)據(jù)就是De頁(yè)面中count的數(shù)據(jù)       var co = $(data).text();       if (parseInt(co) == 0) {        var lbl = document.getElementById("Label1");//利用js輸出        lbl.innerHTML = "√";       } else {        var lbl = document.getElementById("Label1");        lbl.innerHTML = "此用戶名已注冊(cè)";       }              }     });    });   }); </script>

四、在傳值的頁(yè)面中的Page_Load中寫(xiě)如下代碼

protected void Page_Load(object sender, EventArgs e) {  //查詢傳過(guò)來(lái)的數(shù)據(jù)  DataClassesDataContext dc = new DataClassesDataContext();  string uid = Request["id"].ToString();  int count = dc.STOpro.Where(r => r.Stoid == int.Parse(uid)).Count();  //以xml形式返回  Response.Write("<?xml varsion='1.0'?>");  Response.Write("<count>" + count + "</count>");  Response.End();//關(guān)掉Response  }

完成！