前几天接触了jquery 看到里面ajax的部分，自己也不是很懂，然后有重复看了即便，然后写了一个小功能，分享下...我刚学的。有错误的请指教。

验证用户名是否存在

在checkname_jqajax.aspx的文本框输入一个用户名，点击检查按钮，在span 输出结果（是否存在）。

check.aspx.cs 设置数据

1.使用jquery中的ajax 这个方法相对于Ajax 来说代码行数少很多，封装起来了。

checkname_jqajax.aspx 页面

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkname_jqajax.aspx.cs" Inherits="checkname2" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head id="Head1" runat="server">
  7.     <title>利用jq的ajax检测用户名</title>
  8.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  9.     <script>
  10.         $(document).ready(function () {
  11.             $("#button1").click(function () {
  12.                 var name = document.getElementById("input_name").value;
  13.                 if (name.length == ) {                                          //判断用户名是否输入
  14.                     alert("请输入用户名");
  15.                     return;
  16.                 }
  17.                 var url = "check.aspx?name=" + name;                             //在url后面传参数
  18.                 $.get(
  19.                      url,
  20.                      function (data) {
  21.                          if (data == "False") {
  22.                              document.getElementById("msg").innerHTML = "该用户名可以使用";
  23.                          }
  24.                          else {
  25.                              document.getElementById("msg").innerHTML = "该用户名已存在";
  26.                          }
  27.                      }
  28.                 );
  29.             })
  30.         })
  31.  
  32.     </script>
  33.  
  34. </head>
  35. <body>
  36.     <form id="form1" runat="server">
  37.        输入用户名：<input id="input_name" type="text" /><span id="msg"></span><br />
  38.        <button type="button" id="button1" >check</button>
  39.     </form>
  40. </body>
  41. </html>

check.aspx.cs 代码数据

  1.     protected void Page_Load(object sender, EventArgs e)
  2.     {
  3.         string a = Request.QueryString["name"].ToString();
  4.  
  5.         string[] stname = { "tom", "jack", "lili", "aclis" };
  6.  
  7.         bool isExists = false;
  8.         if (stname.Contains(a))
  9.         {
  10.             isExists = true;
  11.         }
  12.  
  13.         Response.Write(isExists);
  14.         Response.End();
  15.     }

以上就是jquery.ajax 的方式了。

2.使用Ajax获取数据

checkname_ajax.aspx 页面

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkname_ajax.aspx.cs" Inherits="Default6" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head id="Head1" runat="server">
  7.     <title>使用ajax检查用户名是否存在</title>
  8.     <script type="text/javascript">
  9.         var xhrhttp;
  10.         function checkname() {
  11.             var name = document.getElementById("input_name").value;
  12.             if (name.length == ) {                                                //判断用户名是否输入
  13.                 alert("请输入用户名");
  14.                 return;
  15.             }
  16.             else if (window.XMLHttpRequest) {
  17.                 xhrhttp = new XMLHttpRequest();
  18.             }
  19.             else {
  20.                 xhrhttp = new ActiveXObject("Microsoft.XMLHTTP");
  21.             }
  22.  
  23.             xhrhttp.onreadystatechange = function () {
  24.                 if (xhrhttp.readyState ==  && xhrhttp.status == ) {
  25.                     if (xhrhttp.responseText == "False") {
  26.                         document.getElementById("msg").innerHTML = "可以使用该用户名";
  27.                     }
  28.                     else if(xhrhttp.responseText =="True") {
  29.                         document.getElementById("msg").innerHTML = "该用户名已存在";
  30.                     }
  31.                 }
  32.             }
  33.             //在url后面传递name
  34.             var url = "check.aspx?name=" + name;
  35.  
  36.             xhrhttp.open("get", url, true);
  37.             xhrhttp.send(null);
  38.             // document.getElementById("span").innerHTML = xhrhttp.responseText;
  39.  
  40.         }
  41.     </script>
  42. </head>
  43. <body>
  44.     <form id="form1" runat="server">
  45.         输入用户名：<input id="input_name" type="text"  /><span id="msg"></span><br />
  46.         <button id="check" type="button" onclick="checkname()">检查</button>
  47.  
  48.     </form>
  49. </body>
  50. </html>

数据页面都是 check.aspx.cs

以上就是Ajax的

PS:总结 Ajax 的总的也就是那三四十行代码，基本不变的，懂得运用就行。     而jquery.ajax的  重要的 $.get() 和$.post 这个以后再讲哈！

最后推荐一个小工具，Firefox自带的脚本调试工具Firebug，当真是神奇啊，功能和VS 差不多。断点调试，添加监控。

现在到这里就结束了~~

jquery.ajax和Ajax 获取数据的更多相关文章

  1. React 中的 AJAX 请求：获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

  2. jsTree通过AJAX从后台获取数据

    页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { ...

  3. ajax异步请求获取数据，实现滚动数字的效果。

    BackgroundPositionAnimate.js下载 需要导入的js: <script type="text/javascript" src="js/jqu ...

  4. Ajax从服务器端获取数据

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  5. Ajax从服务器端获取数据---原生态Ajax

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  6. MVC—实现ajax+mvc异步获取数据

    之前写过ajax和一般处理程序的结合实现前后台的数据交换的博客,如今做系统用到了MVC,同一时候也用到了异步获取数据. ajax+一般处理程序与MVC+ajax原理是一样的在"URL&quo ...

  7. jQuery使用ajax跨域获取数据

    var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld";  jQuery.support.cors = ...

  8. scrapy爬虫之模拟ajax post请求获取数据

    实质:分析真实请求地址,根据规则构造新地址从而获得数据. 分析发现数据是通过异步ajax方式→post 获得的 于是通过分析response ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 发现每次翻页 网 ...

  9. c# ajax从后台获取数据list数组 $.each再显示数据

    后台代码 public JsonResult linkage(string Department) {//逻辑是:先从数据库查到表数据 再把表数据转换为LIST给AJAX HE_Department ...

  10. echart表格，动态的通过ajax从后台获取数据动态的展示数据

    官网上都是介绍的echar表格的展示方法,但是都是静态数据,一开始的时候我总是纳闷,这些数据都是怎么上上去的 , 后来通过一些方法,当然这些方法也不是我自己写出来的,也是通过在网上收集了一下 ,现在才 ...

随机推荐

  1. 继刚接触play framework后,一些心得

    我是个小菜鸟,我这些体会跟心得纯属个人观点,仅供参考,勿喷,我想记录下学习的历程,不断成长 在play2.0的框架里面  用到的最多的语言就是scala,对于习惯了java语言的我们来说  看这些语言 ...

  2. editor.md实现Markdown编辑器

    editor.md实现Markdown编辑器 Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可 ...

  3. js与webview 常用交互代码

    常用js交互 css常用参数::: 是否允许用户选择元素的内容,选择值包括:     auto:用户可以选择元素内的内容     none:用户不能选择任何内容     text:用户只能选择元素内的 ...

  4. No enclosing instance of type test8 is accessible. Must qualify the allocation with an enclosing instance of type test8 (e.g. x.new A() where x is an

    在编译一个例子时,结果编译时出现: No enclosing instance of type test8 is accessible. Must qualify the allocation wit ...

  5. android showAsDropDown的用法属性介绍

    使用PopupWindow可实现弹出窗口效果,,其实和AlertDialog一样,也是一种对话框,两者也经常混用,但是也各有特点.下面就看看使用方法.首先初始化一个PopupWindow,指定窗口大小 ...

  6. 匹配“is outside location”

    <pre name="code" class="html">is outside location 怎么匹配? . 匹配除换行外的所有单个字符,通常 ...

  7. Java中ThreadLocal无锁化线程封闭实现原理

    虽然现在可以说很多程序员会用ThreadLocal,但是我相信大多数程序员还不知道ThreadLocal,而使用ThreadLocal的程序员大多只是知道其然而不知其所以然,因此,使用ThreadLo ...

  8. 浅谈NoSQL之MongoDB数据库

    对于SQL数据库(关系型数据库)我们大家都有所了解,比如MySQL,sqlserver,oracle等数据库.在日常的开发过程中我们遇到服务器端的数据存储时几乎第一反应就是使用SQL据库像我们最常见的 ...

  9. 关于NetBeans IDE的配置优化

    首先,IDE的版本最好对应着JDK的版本. NetBeans优化的目的是提高NetBeans的启动速度和运行速度.下面介绍的NetBeans优化技巧是在版本6.0beta2上的优化.经过实验,大大提高 ...

  10. ACM-简单题之Ignatius and the Princess II——hdu1027

    转载请注明出处:http://blog.csdn.net/lttree Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Othe ...