from,提交信息,抛弃当前页面,并刷新页面。
AJAX,从当前页面获取信息,并提交、反馈信息,不会抛弃页面。
例:
用户注册时,验证用户名是否已存在,
创建两个标准控件:TextBox1,Label1
在HTML源中需要引用JQuery文件,这里使用的是jquery-2.1.3.js,可从jquery.com下载
<script src="js/jquery-2.1.3.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(
function () {
$("#TextBox1").blur(function () {//当鼠标点击或焦点离开时触发
var txt = $(this).val();//获取文本框的值
//如何使用AJAX发送出文本框的值
$.ajax({
url: "CheakUserName.aspx",//指向的是另一个页面
type: "POST",
data: { id: txt },//把文本框的值存到 id 中
//接收
datatype: "XML",
success: function (data) {
var co = $(data).text();
if (parseInt(co) == 0) {
var lb1=document.getElementById("Label1")
lb1.innerHTML = "可用";
}
else {
var lb1 = document.getElementById("Label1")
lb1.innerHTML = "用户已存在!";
}
}
});
});
});
</script>
再创建一个新的页面,注意上段代码中加粗部位的url中的指向,便是此页面。
在CheakUserName.aspx.cs中的代码:(主要修改页面加载事件)
private DataClassesDataContext _Context;
protected void Page_Load(object sender, EventArgs e)
{
_Context = new DataClassesDataContext();//LINQ初始化
string uid = Request["id"].ToString();//获取id的值
int count = _Context.Login.Where(r => r.UserName == uid).Count();//根据获取的用户名在表Login中查询,数量
Response.Write("<?xml version='1.0'?>");//Web.config中的文件开始
Response.Write("<count>" + count + "</count>");//必须要一个标签来查找count
Response.End();
}
Web.config的文件开始
数据库Login表的数据
测试结果: