如何手写Ajax实现异步刷新

网络编程 AJAX相关 分类:[default] 更新日期: 2017-05-23
这篇文章主要教大家如何手写Ajax实现异步刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

所谓的异步刷新,就是不刷新整个网页进行更新数据。

只有通过js才能实现Ajax,进而实行异步刷新

表单提交数据和Ajax提交数据的区别:表单提交是提交的整个页面中的数据,提交数据之后会抛弃之前的页面(刷新页面);ajax是在当前页面提取某些数据并提交出去,并能接收返回来的数据,处理之后进而显示在当前页面(不刷新页面)。 

【例子】==验证用户名是否重复==

使用Ajax的思路:在要刷新的页面中写js和Ajax代码,把数据提交给另一个页面,在Page_Load中写查询代码并把结果返回到刷新的页面。

界面

如何手写Ajax实现异步刷新

一、使用Linq连接数据库

二、把jquery文件导入到项目中。代码写在<head>中

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

三、在刷新的页面写如下代码。代码写在<head>中

<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>

四、在传值的页面中的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='1.0'?>");
  Response.Write("<count>" + count + "</count>");
  Response.End();//关掉Response
 
 }

 完成!

如何手写Ajax实现异步刷新

如何手写Ajax实现异步刷新

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 探讨Ajax中有关readyState状态值和status状态码)的问题
    这篇文章主要介绍了探讨Ajax中有关readyState状态值和status状态码的问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function () { t ...
  • Web2.0编程思想:16条法则
    1.在你开始之前,先定一个简单的目标.无论你是一个Web 2.0应用的创建者还是用户,请清晰的构思你的目标.就像"我需要保存一个书签"或者"我准备帮助人们创建可编辑的.共享的页面"这样的目标,让你保持最基础的需求.很多Web 2.0应用的最初吸引之处就是它的简单,避免并隐藏了那些多余的复杂性.站在创建者的立场,可以想象 ...
  • 提高代码可读性的十大注释技巧分享
    这篇文章主要介绍了提高代码可读性的十大注释技巧,详细分析了编程开发中常用的代码注释方法,需要的朋友可以参考下本文讲述了提高代码可读性的十大注释技巧.分享给大家供大家参考,具体如下: 很多程序员在写代码的时候往往都不注意代码的可读性,让别人在阅读代码时花费更多的时间.其实,只要程序员在写代码的时候,注意为代码加注释,并以合理的格式为代码加注释,这样就方便别人查 ...
  • PHP微信开发之文本自动回复
    PHP微信开发之文本自动回复
    这篇文章主要为大家详细介绍了PHP微信开发之简单实现文本自动回复的相关资料,感兴趣的小伙伴们可以参考一下首先,先去微信公众平台注册一个账号(注册要填的东西挺多的),注册好之后,登录进去.可以看到左侧的"开发者中心",开启开发者中心前好像还要你完善一些资料,按照步骤完善即可.进入开发者中心之后,先去编辑 修改配置,修改配置的时候,注意: U ...
  • Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天 ...
  • ASP.NETWebApi2实现多文件打包并下载文件的实例
    ASP.NETWebApi2实现多文件打包并下载文件的实例
    这篇文章主要介绍了ASP.NET Web Api 2利用ByteArrayContent和StreamContent实现多文件打包并下载的方法,提供源码下载,需要的朋友可以参考下.最近由于工作和个人事务,站点也好久没更新了,但这并不影响我对.NET的热情.站点的更新工作还是得想办法抽时间来完成的. 今天利用中午的时间来写一篇关于Asp.Net Web Api ...
猜你喜欢