您的位置：首页 > Web前端 > JQuery

JQuery学习（2）之Ajax

2015-09-24 10:53 459 查看

同步传输　　　　　　正　　　　多件事情一起做　　|　　程不　　　　事情一件一件地做

　　　　　　　　　　常：　　　　　　　　　　　　|　　序是：

异步传输　　　　　　人　　　　事情一件一件地做　|　　员人　　　　多件事情可以一起做

[b]附加（XML）[/b]

★XML作用：用来存储数据。

★XML特点（注意事项）：①XML文档有且只有一个根节点

②XML是严格区分大小写的

③XML标签成对出现

[b]Ajax代码一分为二[/b]

Ⅰ、服务端代码（用的一般处理程序）

第一步：获取传来的数据

第二步：处理数据生成结果

第三步：Response写入XML字符串

Ⅱ、客户端代码（实现无刷新，获取数据）

①发送请求之前的代码--主调函数

②发送请求之后的代码--回调函数

第一步：判断要给谁添加事件，添加什么事件

第二步：判断是否需要传参，需要传参，就获取值（在事件之内实现获取值的代码）

第三步：调用ajax函数，，详解ajax函数步骤(JQuery实现)：

$.ajax({

　　url:"要调用服务器端的路径"，----------注意：用逗号隔开

　　data:{名（自拟）:"值"},--------------名（自拟），在一般处理程序中通过Request["名"]来获取传来的值，若要传多个参数，用逗号隔开。

　　type:"POST",--------------大写

　　dataType:"XML",----------------大写

　　success:function (data){--------------千万不要忘了加参数，data代表服务器返回来的数据，这里用的是XML

　　　　//解析XML:解析服务端返回过来的XML文件--------注解①

　　　　//显示HTML:把解析出来的XML，显示数来---------注解②

　　}

})；

注解①：如果在XML文件中要获取的内容是标签的纯文本形式如：<book>水浒传</book><price>1.0</price>，所用的解析XML文件的方法：find("标签名").text-------------JQuery获取标签文本的方法

例： var rel = $(data).find("标签名").text;

如果在XML文件中要获取的信息写入了标签的属性中如：<book name="[b]水浒传" value="1.0" />,所用的解析XML文件的方法:attr("属性名")--------------JQuery获取标签属性的方法[/b]

例：var rel =$(data).find("标签名").attr("value");

注解②：显示HTML

调用的JQuery的html（）方法

append() 追加子节点

实战例子

Ⅰ用户注册--html代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="script/jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#txtUser").blur(function () {
var user = $("#txtUser").val();
$.ajax({
url: "login.ashx",
data: { u: user },
type: "POST",
dataType: "XML",
success: function (data) {
//解析
var rel=$(data).find("result").text();
//显示
if (rel=="True") {
$("#lbl").html("该用户名可以使用");
}
else {
$("#lbl").html("用户名已存在");
}
}//success
})//ajax
})//blur
})//ready
</script>
</head>
<body>
<h1>用户注册界面</h1>
<form id="form1" runat="server">
<div>

用户名：<asp:TextBox ID="txtUser" runat="server"></asp:TextBox>
<asp:Label ID="lbl" runat="server" Text="Label"></asp:Label>
<br />
密码：<asp:TextBox ID="txtPass" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnLogin" runat="server" Text="注册" />

</div>
</form>
</body>
</html>

服务端代码：

public class login : IHttpHandler {
private MyDBDataContext _Context = new MyDBDataContext();
public void ProcessRequest (HttpContext context)
{
//获取传过来的值
string s = context.Request["u"].ToString();
bool isOK;
var query = this._Context.Login.Where(r => r.UserName == s);
if (query.Count() == 0)
{
isOK = true;
}
else
{
isOK = false;
}
string xmll = "<?xml version='1.0'?>";
xmll += "<result>" + isOK + "</result>";
context.Response.Write(xmll);
context.Response.End();
}

Ⅱ一边录入信息一边获取信息

html代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="script/jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function () {
$("#txtUser").keyup(function () {//每输入一个字符请求一次
var s = $("#txtUser").val();//获取录入的值
$.ajax({
url: "Message.ashx",
data: { uid: s },
type: "POST",
dataType: "XML",
success: function (data) {
//解析
var name = $(data).find("name").text();
var pass = $(data).find("pass").text();
var account = $(data).find("account").text();
//显示
$("#lblName").html(name);
$("#lblPass").html(pass);
$("#lblAccount").html(account);
}//success
});//ajax
});//.keyup
});//ready
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtUser" runat="server"></asp:TextBox><br />
详细信息：<br />
姓名：<asp:Label ID="lblName" runat="server" Text="Label"></asp:Label><br />
密码：<asp:Label ID="lblPass" runat="server" Text="Label"></asp:Label><br />
账户余额：<asp:Label ID="lblAccount" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>

服务端代码：

public class Message : IHttpHandler {
private MyDBDataContext _Context = new MyDBDataContext();
public void ProcessRequest (HttpContext context) {
string uid = context.Request["uid"].ToString();//获取请求的值
Login data=new Login();
//根据请求的值查询数据库
var query = this._Context.Login.Where(r => r.UserName == uid);
if (query.Count()>0)
{
data = query.First();
}
//写入xml文件
string s = "<?xml version='1.0'?><root><name>" + data.Name + "</name><pass>" + data.Password + "</pass><account>" + data.Account + "</account></root>";
//回复
context.Response.Write(s);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航