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

验证用户名是否存在

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

check.aspx.cs 设置数据

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

checkname_jqajax.aspx 页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkname_jqajax.aspx.cs" Inherits="checkname2" %>

<!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 id="Head1" runat="server">

    <title>利用jq的ajax检测用户名</title>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script>

        $(document).ready(function () {

            $("#button1").click(function () {

                var name = document.getElementById("input_name").value;

                if (name.length == ) {                                          //判断用户名是否输入

                    alert("请输入用户名");

                    return;

                }

                var url = "check.aspx?name=" + name;                             //在url后面传参数

                $.get(

                     url,

                     function (data) {

                         if (data == "False") {

                             document.getElementById("msg").innerHTML = "该用户名可以使用";

                         }

                         else {

                             document.getElementById("msg").innerHTML = "该用户名已存在";

                         }

                     }

                );

            })

        })

    </script>

</head>

<body>

    <form id="form1" runat="server">

       输入用户名：<input id="input_name" type="text" /><span id="msg"></span><br />

       <button type="button" id="button1" >check</button>

    </form>

</body>

</html>

check.aspx.cs 代码数据

    protected void Page_Load(object sender, EventArgs e)

    {

        string a = Request.QueryString["name"].ToString();

        string[] stname = { "tom", "jack", "lili", "aclis" };

        bool isExists = false;

        if (stname.Contains(a))

        {

            isExists = true;

        }

        Response.Write(isExists);

        Response.End();

    }

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

2.使用Ajax获取数据

checkname_ajax.aspx 页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkname_ajax.aspx.cs" Inherits="Default6" %>

<!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 id="Head1" runat="server">

    <title>使用ajax检查用户名是否存在</title>

    <script type="text/javascript">

        var xhrhttp;

        function checkname() {

            var name = document.getElementById("input_name").value;

            if (name.length == ) {                                                //判断用户名是否输入

                alert("请输入用户名");

                return;

            }

            else if (window.XMLHttpRequest) {

                xhrhttp = new XMLHttpRequest();

            }

            else {

                xhrhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhrhttp.onreadystatechange = function () {

                if (xhrhttp.readyState ==  && xhrhttp.status == ) {

                    if (xhrhttp.responseText == "False") {

                        document.getElementById("msg").innerHTML = "可以使用该用户名";

                    }

                    else if(xhrhttp.responseText =="True") {

                        document.getElementById("msg").innerHTML = "该用户名已存在";

                    }

                }

            }

            //在url后面传递name

            var url = "check.aspx?name=" + name;

            xhrhttp.open("get", url, true);

            xhrhttp.send(null);

            // document.getElementById("span").innerHTML = xhrhttp.responseText;

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

        输入用户名：<input id="input_name" type="text"  /><span id="msg"></span><br />

        <button id="check" type="button" onclick="checkname()">检查</button>

    </form>

</body>

</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. jQuery读取json文件，实现省市区/县（国标）三级联动

    最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动. 其实很简单,jQuery文档也有详细解释: 代码如下: html <table w ...

  2. ecshop优化修改sitemap.xml到根目录

    大家都知道sitemap.xml是用来给搜索引擎提交收录的工具,虽然搜索引擎自己也会收录网站但是有了sitemap.xml之后速度会加快不少.而ecshop程序是有自动生成sitemap.xml的功能 ...

  3. Hql 子查询

    直接上代码: public virtual IList<VoucherLog> GetMaxResultVoucherLog() { string orgaizationCode = Ht ...

  4. Nlog从下载到使用例子

    第一.首先下载nlog.dll 下载地址:http://pan.baidu.com/s/1i3DQsV7 第二.添加nlog.ll的引用 第三.代码 private static Logger log ...

  5. block（四）揭开神秘面纱（下）

    看此篇时,请大家同时打开两个网址(或者下载它们到本地然后打开): http://llvm.org/svn/llvm-project/compiler-rt/trunk/lib/BlocksRuntim ...

  6. PowerShell为什么强大

    PowerShell为什么强大 本文索引 [隐藏] 5.1举例介绍 1破天荒的方便 2面向对象 3绑上.NET这棵大树 4强大的兼容性 5基于平台的可扩展性 微软是一个很”低调”的公司,取名为微软,感 ...

  7. java设计模式--结构型模式--桥接模式

    桥接模式 概述 将抽象部分与它的实现部分分离,使它们都可以独立地变化. 适用性 1.你不希望在抽象和它的实现部分之间有一个固定的绑定关系. 例如这种情况可能是因为,在程序运行时刻实现部分应可以被选择或 ...

  8. 【剑指offer】面试题28：字符串的排列

    题目: 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入描述:输入一 ...

  9. 【POJ1003】Hangover（二分搜索）

    直接用库函数二分即可. #include <iostream> #include <cstring> #include <cstdlib> #include < ...

  10. 04747_Java语言程序设计（一）_第8章_多线程

    例8.1应用程序用Thread子类实现多线程. import java.util.Date; public class Example8_1 { static Athread threadA; sta ...