비동기식 새로 고침을 구현하기 위한 필기 Ajax 예제 방법

소위 비동기 새로 고침은 전체 웹 페이지를 새로 고치지 않고 데이터를 업데이트하는 것을 의미합니다. js를 통해서만 Ajax를 구현할 수 있으며 그 후에 비동기 새로 고침을 구현할 수 있습니다. 이 글은 주로 Ajax를 직접 작성하여 비동기식 새로 고침을 구현하는 방법을 설명합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

양식 제출 데이터와 Ajax 제출 데이터의 차이점: 양식 제출은 전체 페이지에 대한 데이터 제출입니다. 데이터를 제출한 후 이전 페이지는 삭제됩니다(페이지 새로 고침). 반환된 데이터를 받아 처리 후 현재 페이지에 표시할 수 있습니다(페이지를 새로 고치지 않고).

【예제】==사용자 이름이 중복되는지 확인==　

Ajax 사용 아이디어: 새로 고칠 페이지에 js 및 Ajax 코드를 작성하고, 해당 데이터를 다른 페이지에 제출하고, 쿼리 코드를 Page_Load 및 결과 넣기 새로 고침된 페이지로 돌아갑니다. ​

Interface

1. Linq를 사용하여 데이터베이스에 연결합니다

2. jquery 파일을 프로젝트로 가져옵니다. 코드는 93f0f5c25f18dab9d176bd4f6de5d30e

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

에 작성됩니다. 3. 새로고침된 페이지에 다음 코드를 작성합니다. 코드는 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. 값 전달 페이지의 Page_Load에 다음 코드를 작성합니다.

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
 
 }

완료! ㅋㅋㅋ 방법( 데모 다운로드 포함)_jquery

위 내용은 비동기식 새로 고침을 구현하기 위한 필기 Ajax 예제 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!