jquery.ajax和Ajax 获取数据

前几天接触了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 == 0) { //判断用户名是否输入 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 == 0) {                                                //判断用户名是否输入

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

                return;

            }

            else if (window.XMLHttpRequest) {

                xhrhttp = new XMLHttpRequest();

            }

            else {

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

            }



            xhrhttp.onreadystatechange = function () {

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

                    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)