使用$.ajax()方法发送请求
(1)功能描述
创建一个用于登录的HTML页login.html,在页面中设置用于输入“用户名”和“密码”的文本框及“登录”和“取消”按钮,该页面不做任何数据处理。
另外,创建一个服务器端页面login.aspx,用于处理静态页发送来的登录请求;同时创建一个HTML页6-9.html。在6-9.html中,先使用$.ajax()方法请求调用login.html页面,然后通过页面中“登录”按钮的单击事件,将获取的用户名称和密码发送到服务器,服务器响应请求,向客户端发送处理后的数据,客户端根据回调的数据显示不同的页面效果。
(2)实现代码
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({ //请求登录
url:"login.html", //登录静态页
dataType:"html",
success: function(HTML) { //返回页面内容
//将页面内容置入表单
$("#frmUserLogin").html(HTML);
//“登录”按钮单击事件
$("#btnLogin").click(function() {
//获取用户名称
var strTxtName = encodeURI($("#txtName").val());
//获取输入密码
var strTxtPass = encodeURI($("#txtPass").val());
//开始发送数据
$.ajax({ //请求登录处理页
url:"login.aspx", //登录处理
dataType:"html",
//传送请求数据
data: {
txtName: strTxtName ,
txtPass: strTxtPass
} ,
//登录成功后返回的数据
success: function (strValue) {
//根据返回值进行状态显示
if (strValue == "True") {
$(".clsShow")
.html("操作提示,登录成功!");
}
else {
$("#divError")
.show().html("用户名或密码错误!");
}
}
})
})
}
})
})
</script>
<form id="frmUserLogin"></form>
另外,再新建一个HTML页面Login.html,该文件的代码内容如下所示:
<div class="divFrame">
<div class="divTitle">
<span>用户登录</span>
</div>
<div class="divContent">
<div class="clsShow">
<div id="divError" class="clsError"></div>
<div>名称:<input id="txtName" type="text" class="txt"></div>
<div>密码:<input id="txtPass" type="password" class="txt"></div>
<div>
<input id="btnLogin" type="button" value="登录" class="btn" />  
<input id="btnReset" type="reset" value="取消" class="btn" />
</div>
</div>
</div>
</div>
新建一个服务器端文件Login.aspx,该文件代码内容如下:
<%@ Page Language="C#" ContentType="text/html" ReponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]); //解码姓名字符
string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]); //解码密码字符
bool blnLogin = false;
if (strName == "admin" && strPass == "123456") {
blnLogin = true;
}
Response.Write(blnLogin);
%>
代码分析:
由于$.ajax()方法是jQuery中最底层的方法,因此,凡使用全局变量函数$.getScript(),$.get(),$post(),$.getJSON()调用的示例,都可以使用$.ajax()方法进行代替,限于篇幅,读者可以自行测试。