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 == ) { //判断用户名是否输入
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>