如何手写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

 }

完成！

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

赞 (0)

相关推荐

  • ajax异步刷新实现更新数据库

    ajax异步刷新实现更新数据库

    上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中. 当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库. 首先,我们需要声明XMLHttpRequest对象 复制代码 代码如下: //声明XMLHttpRequest对象 var xmlHttp; function createXMLHTTP() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 } else if

  • ajaxpro.dll 控件实现异步刷新页面

    html代码 复制代码 代码如下: <script type="text/javascript"><!-- function getUserName() { Demo.ajax.GetUserName(document.getElementById("accout").value,getName); } function getName(respone) { document.getElementById("passowrd")

  • php+jQuery+Ajax简单实现页面异步刷新

    php+jQuery+Ajax简单实现页面异步刷新

    页面显示如下: JQueryAjax.html中的代码如下(用的较为简单的$.post) <html> <head> <meta charset="UTF-8"> <title>JQueryAjax+PHP</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"

  • jQuery ajax请求struts action实现异步刷新

    这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换,第二种是采用goole的gson-2.1.jar来转换,大家可以根据需要导入相应的jar包,在这里为了做测试将两种jar包都导入了.下面开始进入正题 第一步:导入相关jar包,本样例需导入struts相关jar包,json-lib.jar,gson-2.1.jar可以任意选择,但是这里需要都导入,因

  • asp.net jquery+ajax异步刷新实现示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • Ajax实现异步刷新验证用户名是否已存在的具体方法

    Ajax实现异步刷新验证用户名是否已存在的具体方法

    都是简单的实例,所以直接发代码 静态页面Ajax.html 复制代码 代码如下: <html>    <head>        <title>Ajax</title>        <script type="text/javascript">            function loadXMLDoc() {                if (document.getElementById("account

  • jQuery使用$.ajax进行异步刷新的方法(附demo下载)

    jQuery使用$.ajax进行异步刷新的方法(附demo下载)

    本文实例讲述了jQuery使用$.ajax进行异步刷新的方法.分享给大家供大家参考,具体如下: 最近要用到jquery进行异步读取数据的功能,jquery提供了许多内置的异步读取函数,给大家演示下最常用的$.ajax用法 在客户端文本框输入一个内容,然后在服务器端返回时间 在DEMO中要用到ashx文件,用于获取服务器的信息 效果图片 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 客户端代码 <%@ Page Language="C#" Au

  • 如何手写Ajax实现异步刷新

    如何手写Ajax实现异步刷新

    所谓的异步刷新,就是不刷新整个网页进行更新数据. 只有通过js才能实现Ajax,进而实行异步刷新 表单提交数据和Ajax提交数据的区别:表单提交是提交的整个页面中的数据,提交数据之后会抛弃之前的页面(刷新页面):ajax是在当前页面提取某些数据并提交出去,并能接收返回来的数据,处理之后进而显示在当前页面(不刷新页面). [例子]==验证用户名是否重复== 使用Ajax的思路:在要刷新的页面中写js和Ajax代码,把数据提交给另一个页面,在Page_Load中写查询代码并把结果返回到刷新的页面.

  • Vue Router的手写实现方法实现

    为什么需要前端路由 在前后端分离的现在,大部分应用的展示方式都变成了 SPA(单页面应用 Single Page Application)的模式.为什么会选择 SPA 呢?原因在于: 用户的所有操作都在同一个页面下进行,不进行页面的跳转.用户体验好. 对比多页面,单页面不需要多次向服务器请求加载页面(只请求一次.html文件),只需要向服务器请求数据(多亏了 ajax).因此,浏览器不需要渲染整个页面.用户体验好. 归根结底,还是因为 SPA 能够提供更好的用户体验. 为了更好地实现 SPA,前

  • 前端面试JavaScript高频手写大全

    前端面试JavaScript高频手写大全

    目录 1. 手写instanceof 2. 实现数组的map方法 3. reduce实现数组的map方法 4. 手写数组的reduce方法 5. 数组扁平化 5. 1 es6提供的新方法 flat(depth) 5.2 利用cancat 6. 函数柯里化 7. 浅拷贝和深拷贝的实现 7.1浅拷贝和深拷贝的区别 8. 手写call, apply, bind 8.1 手写call 8.2 手写apply(arguments[this, [参数1,参数2.....] ]) 8.3 手写bind 9.

  • Angularjs 手写日历的实现代码（不用插件）

    Angularjs 手写日历的实现代码（不用插件）

    本文介绍了Angularjs 手写日历的实现代码(不用插件),分享给大家,具体如下: 效果: Html: <div class="plan_content_box" data-ng-init="showTime()"> <div class="field" style="width: 100%;"> <span class="field_label" style="w

  • flex 手写在线签名实现代码第1/2页

    在线手写签名分两部份.第一部分是画图功能的实现,第二部份是上传图片的功能(上传到服务器或保存到本地). 画图:画图比较简单,只要用到了graphics对像的几个方法.当鼠标按下时,调用graphics的beginFill和moveTo方法.同时,还要把调用了lineTo的方法加入到鼠标的MOUSE_MOVE事件中.代码如下: Actionscript代码 复制代码 代码如下: package com.humanmonth.home.component.page.signature { impor

  • iOS开发中一些手写控件及其相关属性的使用

    iOS开发中一些手写控件及其相关属性的使用

    手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View Contollor和view的关系 2.注意点 在OC开发中,Storyboard中的所有操作都可以通过代码实现,程序员一定要熟练掌握代码布局界面的能力! 设置控件监听方法的示例代码如下: 复制代码 代码如下: [btn addTarget:s

  • 纯JavaScript手写图片轮播代码

    废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2p

  • 使用原生js写ajax实例(推荐)

    实例如下: // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器 return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ // IE6浏览器 var version = [ "MSXML2.XMLHttp.6.0

  • 简单介绍不用库（框架）自己写ajax

    简单介绍不用库（框架）自己写ajax

    平常会使用ajax来请求数据,加载一个库(框架),或许仅仅maybe就使用了它的ajax部分. 写个ajax,一来可以经历一下处理问题的过程,提升技术能力,二来工作中有时真的用不着这么大的一个库(框架),用自己写的,何乐不为呢. 先来看看流行的jQuery是怎样调用ajax的 $.ajax({ url: 'test.php', //发送请求的URL字符串 type: 'GET', //发送方式 dataType: 'json', //预期服务器返回的数据类型 xml, html, text, j

随机推荐