JQuery学习笔记 [Ajax] (6-2)
1). $.get发送请求
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.get("UserInfo.aspx",
{ name: encodeURI($("#txtName").val()) },
function(data) {
$("#divTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
UserInfo.aspx:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
if (strName == "陶国荣")
{
strHTML += "姓名：陶国荣<br>";
strHTML += "性别：男<br>";
strHTML += "邮箱：tao_guo_rong@163.com<hr>";
}
else if (strName == "李建洲")
{
strHTML += "姓名：李建洲<br>";
strHTML += "性别：女<br>";
strHTML += "邮箱：xiaoli@163.com<hr>";
}
strHTML += "</div>";
Response.Write(strHTML);
%>
2). $.post发送请求
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.post("User_Info.aspx",
{ name: encodeURI($("#txtName").val()),
sex: encodeURI($("#selSex").val())
},
function(data) {
$("#divTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
User_Info.aspx:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);//解码性别字符
string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
if (strName == "陶国荣" && strSex=="男")
{
strHTML += "姓名：陶国荣<br>";
strHTML += "性别：男<br>";
strHTML += "邮箱：tao_guo_rong@163.com<hr>";
}
else if (strName == "李建洲" && strSex == "女")
{
strHTML += "姓名：李建洲<br>";
strHTML += "性别：女<br>";
strHTML += "邮箱：xiaoli@163.com<hr>";
}
strHTML += "</div>";
Response.Write(strHTML);
%>
3). serialize()序列化表单
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件，并通过回调函数返回服务器响应后的数据
$.post("User-Info.aspx",
$("#frmUserInfo").serialize(), //序列化表单数据
function(data) {
$("#divTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
User-Info.aspx:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]); //解码姓名字符
string strSex = System.Web.HttpUtility.UrlDecode(Request["selSex"]); //解码性别字符
string strEmail = Request["chkEmail"]; //是否显示邮件字符
string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
if (strName == "陶国荣" && strSex=="男")
{
strHTML += "姓名：陶国荣<br>";
strHTML += "性别：男<br>";
if (strEmail=="1")
{
strHTML += "邮箱：tao_guo_rong@163.com";
}
strHTML += "<hr>";
}
else if (strName == "李建洲" && strSex == "女")
{
strHTML += "姓名：李建洲<br>";
strHTML += "性别：女<br>";
if (strEmail == "1")
{
strHTML += "邮箱：xiaoli@163.com<hr>";
}
strHTML += "<hr>";
}
strHTML += "</div>";
Response.Write(strHTML);
%>
4). $.ajax()方法发送请求
$(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("用户名或密码错误！");
}
}
})
})
}
})
})
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" ResponseEncoding="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);
%>
5). $.ajaxSetup()方法全局设置Ajax
$(function() {
$.ajaxSetup({ //设置全局性的Ajax选项
type: "GET",
url: "UserInfo.xml",
dataType: "xml"
})
$("#Button1").click(function() { //"姓名”按钮的单击事件
$.ajax({
success: function(data) { //传回请求响应的数据
ShowData(data, "姓名", "name"); //显示"姓名"部分
}
})
})
$("#Button2").click(function() { //"性别”按钮的单击事件
$.ajax({
success: function(data) { //传回请求响应的数据
ShowData(data, "性别", "sex"); //显示"性别"部分
}
})
})
$("#Button3").click(function() { //"邮箱”按钮的单击事件
$.ajax({
success: function(data) { //传回请求响应的数据
ShowData(data, "邮箱", "email"); //显示"邮箱"部分
}
})
})
/*
*根据名称与值，获取请求响应数据中的某部分
*@Param d为请求响应后的数据
*@Param n为数据中文说明字符
*@Param d为数据在响应数据中的元素名称
*/
function ShowData(d, n, v) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(d).find("User").each(function() { //遍历获取的数据
var $strUser = $(this);
strHTML += n + "：" + $strUser.find(v).text() + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
}
})
UserInfo.xml:
<?xml version="1.0" encoding="utf-8" ?>
<Info>
<User id="1">
<name>陶国荣</name>
<sex>男</sex>
<email>tao_guo_rong@163.com</email>
</User>
<User id="2">
<name>李建洲</name>
<sex>女</sex>
<email>xiaoli@163.com</email>
</User>
</Info>
6). Ajax中的全局事件
$(function() {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("已成功获取数据。").hide();
})
//按钮的单击事件
$("#Button1").click(function() {
$.ajax({ //带参数请求服务器
type: "GET",
url: "GetData.aspx",
//获取加码后的数据并作为参数传给服务器
data: { txtData: encodeURI($("#txtData").val()) },
dataType: "html",
success: function(data) { //显示解码后的返回数据
$("#divTip").html(decodeURI(data));
}
})
})
})
GetData.aspx:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = Request["txtData"]; //返回传回的参数
Response.Write(strName); //返回传回的参数
%>
