如何手写Ajax实现异步刷新

 更新时间:2017年07月31日 16:29:12   作者:爱吃萝卜的猫  
这篇文章主要教大家如何手写Ajax实现异步刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

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

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

界面

一、使用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入门之XMLHttpRequest慨述

    AJAX入门之XMLHttpRequest慨述

    AJAX入门之XMLHttpRequest慨述...
    2006-06-06
  • 浅析Ajax后台success传来json数据的问题

    浅析Ajax后台success传来json数据的问题

    最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据。下面小编给大家介绍下在$.ajax方法中应该是如何来处理的
    2016-10-10
  • Ajax 通过城市名获取数据(全国天气预报API)

    Ajax 通过城市名获取数据(全国天气预报API)

    本文给大家分享全国天气预报API Ajax 通过城市名获取数据,通过html和js两部分代码实现天气预报效果,输入城市就会出现天气情况,效果非常棒,感兴趣的朋友可以参考下
    2016-11-11
  • 聊一聊Ajax的优缺点

    聊一聊Ajax的优缺点

    和大家一起聊一聊Ajax的优缺点,Ajax是一个动态的WEB应用的开发技术,它的出现丰富了用户的体验,今天就和大家进一步的了解Ajax,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 编码为GB2312网站让AJAX接收的数据显示支持中文

    编码为GB2312网站让AJAX接收的数据显示支持中文

    GB2312 网站AJAX接收的数据显示支持中文
    2010-01-01
  • $.ajax中的contentType使用解读

    $.ajax中的contentType使用解读

    这篇文章主要介绍了$.ajax中的contentType使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • ajax 乱码的一种解决方法

    ajax 乱码的一种解决方法

    第一次碰到了这种编码的问题,在windows下AJAX接收到中文数据显示出来全是乱码,而在linux下,竟然提示网页出错,什么显示都没有。
    2009-06-06
  • js结合json实现ajax简单实例

    js结合json实现ajax简单实例

    这篇文章主要为大家详细介绍了js结合json实现ajax简单实例的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 前端ajax请求+后端java实现的下载zip压缩包功能示例

    前端ajax请求+后端java实现的下载zip压缩包功能示例

    这篇文章主要介绍了前端ajax请求+后端java实现的下载zip压缩包功能,结合实例形式分析了ajax请求交互与后端图片zip格式压缩并下载功能相关实现技巧,需要的朋友可以参考下
    2023-05-05
  • 多ajax请求的各类解决方案(同步, 队列, cancel请求)

    多ajax请求的各类解决方案(同步, 队列, cancel请求)

    ajax带来很好的用户体验,于是一个稍微注重web系统使用ajax基本成为必然。当传统功能型web项目向用户体验型项目转变时,层出不穷的需求就来了。正如本篇所介绍的就是一个多个AJAX请求的情况下,如何利用jquery来处理几种case
    2012-03-03

最新评论