Ajax的实现异步刷新详解

这次给大家带来Ajax的实现异步刷新详解,Ajax实现异步刷新的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

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

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

界面

Ajax的实现异步刷新详解

一、使用Linq连接数据库

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

中  


登录后复制

三、在刷新的页面写如下代码。代码写在

     $(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 = "此用户名已注册";       }              }     });    });   }); 

登录后复制

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

登录后复制

 完成!

Ajax的实现异步刷新详解

Ajax的实现异步刷新详解

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

HTTP的报文与ajax基础知识详解

ajax怎样实现不刷新的情况下上传文件

以上就是Ajax的实现异步刷新详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2777129.html

(0)
上一篇 2025年3月8日 15:00:58
下一篇 2025年3月8日 15:01:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • HTTP的报文与ajax基础知识详解

    这次给大家带来HTTP的报文与ajax基础知识详解,使用HTTP报文与ajax基础知识的注意事项有哪些,下面就是实战案例,一起来看一下。 HTTP报文 客户端传递给服务器的内容 和 服务器传递给客户端的内容 都属于HTTP报文   起始行:…

    编程技术 2025年3月8日
    000
  • Ajax方法实现Form表单提交的方法

    这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下。 写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的…

    编程技术 2025年3月8日
    200
  • 使用Ajax时出现乱码怎么解决

    这次给大家带来使用Ajax时出现乱码怎么解决,解决使用Ajax时出现乱码的注意事项有哪些,下面就是实战案例,一起来看一下。 ajax的全称是asynchronous javascript and XML ,它是异步的js和XML。它是局部刷…

    编程技术 2025年3月8日
    200
  • 二次封装jquery ajax如何实现

    这次给大家带来二次封装jquery ajax如何实现,实现二次封装jquery ajax的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 Ajax 的全称是Asynchronous JavaScript and XML 异步的jav…

    编程技术 2025年3月8日
    200
  • 原生ajax与封装的ajax使用方法(附代码)

    这次给大家带来原生ajax与封装的ajax使用方法(附代码),使用原生ajax与封装的ajax的注意事项有哪些,下面就是实战案例,一起来看一下。 当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口。 1、模拟后…

    2025年3月8日 编程技术
    200
  • 用history让ajax支持前进/后退/刷新

    这次给大家带来用history让ajax支持前进/后退/刷新,用history让ajax支持前进/后退/刷新的注意事项有哪些,下面就是实战案例,一起来看一下。 前言: 现在前后端基本都是通过ajax实现前后端接口数据的交互,但是,ajax有…

    2025年3月8日
    200
  • AJAX跨域请求数据方法归纳(实战讲解)

    这次给大家带来AJAX跨域请求数据方法归纳(实战讲解),AJAX跨域请求数据的注意事项有哪些,下面就是实战案例,一起来看一下。 由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据  请求数据需要调用浏览器的内置构造函数 XML…

    编程技术 2025年3月8日
    200
  • 使用Ajax安全的登录界面

    这次给大家带来使用Ajax安全的登录界面,使用Ajax登录界面的注意事项有哪些,下面就是实战案例,一起来看一下。 登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口。接下来,我来带领大家打造一个漂亮、安全的登录界面,使用的技…

    2025年3月8日
    200
  • ajax做出带百分比的进度条(附代码)

    最近做项目遇到这样的需求要求当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验,下面通过实例代码给大家介绍基于ajax实现带百分比进度条效果,需要的的朋友参考下吧 需求:当进行文件长传保存等操作时,能在页面…

    2025年3月8日
    200
  • AJAX与JavaScript的使用详解

    这次给大家带来AJAX与JavaScript的使用详解,AJAX与JavaScript使用的注意事项有哪些,下面就是实战案例,一起来看一下。 AJAX不是JavaScript的规范,它只是一个哥们“发明”的缩写:Asynchronous J…

    2025年3月8日
    200

发表回复

登录后才能评论