Handwritten Ajax example method to implement asynchronous refresh

The so-called asynchronous refresh means updating the data without refreshing the entire web page. Only through js can Ajax be implemented, and then asynchronous refresh can be implemented. This article mainly teaches you how to implement asynchronous refresh by handwriting Ajax. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The difference between form submission data and Ajax submission data: form submission is the submission of data in the entire page. After submitting the data, the previous page will be discarded (refresh the page); ajax extracts certain data from the current page and Submit it and receive the returned data. After processing, it will be displayed on the current page (without refreshing the page).

[Example]==Verify whether the user name is repeated==

The idea of ​​using Ajax: write js and Ajax code in the page to be refreshed, submit the data to another page, and Write query code in Page_Load and return the results to the refreshed page.

Interface

##1. Use Linq to connect to the database

2. Import the jquery file into the project. The code is written in 93f0f5c25f18dab9d176bd4f6de5d30e

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

3. Write the following code on the refreshed page. The code is written in 93f0f5c25f18dab9d176bd4f6de5d30e

<script src="js/jquery-1.2.3.pack.js" type="text/javascript"></script> <%--调用jquery--%>
 
 <script>
  $(document).ready(//当页面准备好加载完成的时候触发
   function getval() {
    $("#TextBox1").blur(function () {//当鼠标点击或离开时触发
     var txt = $(this).val();//获取文本框的值
 
 
     //使用ajax发送出来文本框的值
      
     $.ajax( {
      url: "De.aspx",
      type: "POST",
      data: {id:txt},
 
 
      //接收数据库返回的信息
      datatype: "xml",
      success: function (data) {//data中的数据就是De页面中count的数据
       var co = $(data).text();
       if (parseInt(co) == 0) {
        var lbl = document.getElementById("Label1");//利用js输出
        lbl.innerHTML = "√";
       } else {
        var lbl = document.getElementById("Label1");
        lbl.innerHTML = "此用户名已注册";
       }
        
      }
     });
    });
   });
 </script>

4. Write the following code in Page_Load in the page where the value is passed

protected void Page_Load(object sender, EventArgs e)
 {
  //查询传过来的数据
  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=&#39;1.0&#39;?>");
  Response.Write("<count>" + count + "</count>");
  Response.End();//关掉Response
 
 }

Done!

Related recommendations:

php+jQuery+Ajax simply implements asynchronous page refresh_php example

ajax asynchronous refresh to update the database_jquery

jQuery uses $.ajax to perform asynchronous refresh (with demo download)_jquery

The above is the detailed content of Handwritten Ajax example method to implement asynchronous refresh. For more information, please follow other related articles on the PHP Chinese website!