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 差不多。断点调试，添加监控。
现在到这里就结束了~~
