AJAX 基本结构 数据加载
AJAX
-- 网页数据异步加载
.ashx
一般处理程序
json
数据格式,在不同的语言之间传递数据
对象格式： "{"key":"value","key":"value"}"
数组格式： "[{"key":"value"},{},{}]"
-- 都是字符串格式
例1、对象格式
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Linq; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { string end = "{\"has\":\"false\"}"; string s = context.Request["uname"]; //接受网页传进来的数据 using (DataClassesDataContext con = new DataClassesDataContext()) { Users u = con.Users.Where(r => r.UserName == s).FirstOrDefault(); if (u != null) { end = "{\"has\":\"true\"}"; } } context.Response.Write(end); //将结果写出去 context.Response.End(); //调用 end ，不在写别的东西 } public bool IsReusable { get { return false; } } }
-- 所有内置对象都需要通过 context 点出来
例2、数组格式
<%@ WebHandler Language="C#" Class="Handler2" %> using System; using System.Web; using System.Collections.Generic; using System.Linq; using System.Text; //拼接文本 public class Handler2 : IHttpHandler { public void ProcessRequest(HttpContext context) { StringBuilder str = new StringBuilder(); //拼接文本对象 str.Append("["); using (DataClassesDataContext con = new DataClassesDataContext()) { List<Users> ulist = con.Users.ToList(); int count = 0; foreach (Users u in ulist) { if (count > 0) { str.Append(","); //当前面已经有字符时，在每句前面加 逗号 } str.Append("{\"username\":\"" + u.UserName + "\",\"password\":\"" + u.PassWord + "\",\"nickname\":\"" + u.NickName + "\",\"sex\":\"" + u.Sex + "\",\"birthday\":\"" + u.Birthday + "\",\"nation\":\"" + u.Nation + "\"}"); count++; } } str.Append("]"); context.Response.Write(str); context.Response.End(); } public bool IsReusable { get { return false; } } }
-- StringBuilder str = new StringBuilder();
--str.Append(字符串);
-- 拼接文本对象，在堆栈中不会开辟新空间，将原空间扩大
jqeury.ajax基本结构
基本结构
$.ajax({
url : "Handler.ashx", -- 提交到哪个服务端
data: { "uname": s }, -- 提交的数据，以键值对的方式传字符串，只能是字符串，可以传多个。
type: "post", -- 用什么方法
dataType: "json", -- 返回值的类型
async:true, （默认可不写） -- 异步执行 （async: false 关闭异步功能）
success: function ( msg ){
回调，处理完毕返回的结果
},
error:function( ){
出错（ 路径错，服务端错，没有返回规定的json格式数据）
},
beforeSend:function( ){
发送之前执行（防止重复请求）
},
complete:function( ){
加载完后执行
}
});
-- 传递进去的是字符串，返回的是字符串
例3，操纵一个 json 对象
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.7.1.min.js"></script> </head> <body> <input type="text" id="txt1" placeholder="请输入用户名" /> <span id="txt1_msg"></span> </body> </html> <script type="text/javascript"> $("#txt1").keyup(function () { var s = $(this).val(); //取文本框的值 if (s.length < 6) { $("#txt1_msg").text("用户名不可以小于6位！"); return; //当文本框的值不够6位时，不进入AJAX } $.ajax({ url: "Handler.ashx", data: { "uname": s }, //提交的数据，（k:v） k 与例1对应 type: "post", dataType: "json", success: function (msg) { if (msg.has == 'false') { $("#txt1_msg").text("恭喜！用户名可用！"); $("#txt1_msg").css('color','green'); } else { $("#txt1_msg").text("用户名已被占用！"); $("#txt1_msg").css('color', 'red'); } } }); });
--与例1 对应
例4、操纵一组对象
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../js/jquery-1.7.1.min.js"></script> </head> <body> <input type="button" value="加载数据" id="btn1" /> <table id="tb1" style="width: 100%; text-align: center; background-color: navy;"> <thead> <tr style="color: white;"> <td>用户名</td> <td>密码</td> <td>昵称</td> <td>性别</td> <td>生日</td> <td>民族</td> </tr> </thead> <tbody id="tbody1"> </tbody> </table> </body> </html> <script type="text/javascript"> $("#btn1").click(function () { $.ajax({ url: "../Handler2.ashx", data: {}, type: "post", dataType: "json", success: function (msg) { //返回的是一个集合 $("#tbody1").html(""); //清除，内容变空 for (var i = 0; i < msg.length; i++) { var str = " <tr style=\"background-color: white;\">" str += " <td>" + msg[i].username + "</td>"; str += "<td>" + msg[i].password + "</td>"; str += " <td>" + msg[i].nickname + "</td>"; str += " <td>" + msg[i].sex + "</td>"; str += " <td>" + msg[i].birthday + "</td>"; str += " <td>" + msg[i].nation + "</td>"; str += "</tr>"; $("#tbody1").append(str); //末尾追加 } }, error: function () { //错误，如果找不到服务端，执行此方法 alert('err'); } }); }); </script>
-- 与例2 对应
--表格中
<thead> </thead> --表 标题
<tbody ></tbody> -- 表 内容
jQuery对象与DOM对象的相互转换
jQuery对象转成DOM对象：
两种转换方式
1、通过[index]的方法
var $v =$("#v") ; -- jQuery对象
var v=$v[0]; --DOM对象
2、通过.get(index)方法
var $v=$("#v"); --jQuery对象
var v=$v.get(0); --DOM对象
DOM对象转成jQuery对象:
用$()把DOM对象包装起来
var v=document.getElementById("v"); -- DOM对象
var $v=$(v); -- jQuery对象
