标签：工作 ati name 调用 indicator hang stringbu else 返回
一、Ajax是什么？
全称“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX应用可以仅向服务器发送并取回必需的数据，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览
器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以
Web服务器的处理时间也减少了。
二、Ajax基本过程和格式
1、引入JQuery文件
2、js中ajax的格式
var ss = $(this).val().trim();//取值
if (ss.length <= 0) {
return false;
}
$.ajax({
url: "ajax/yong.ashx",//将数据提交到服务端
data: { "un": ss },//提交的数据
type: "post",//提交的方式
dataType: "json",//返回的数据类型
success: function (aa) //没错时，返回数据执行的语句
{
if (aa.has == "0") {
$("#Label1").text("可用").css("color", "green");
}
else {
$("#Label1").text("已存在").css("color", "red");
}
},//success
error:function(){alert("连接服务端失败！");}//如果出错执行的语句
});//ajax
3、创建LinQ
4、创建服务端
添加一般处理程序 后缀.ashx
导入命名空间
string uname=context.Request["un"];//获取传入的值
string end="{\"has\":\"0\"}";//创建ajax对象
//数据库查询
using(LinQlianxiDataContext con=new LinQlianxiDataContext())
{
var u=con.Users.Where(z=>z.UserName==uname).AsEnumerable();
if(u.Count()>0){
end="{\"has\":\"1\"}";
}
}
context.Response.Write(end);//返回json
context.Response.End();//结束输出
注：（1）xml和json的作用：在不同语言之间进行数据传递
最早使用的数据类型是 xml
劣势：
a、代码量较大
b、结构不清晰
c、解析起来麻烦
现在使用的数据类型是 json
优势：
a、结构清晰
b、类似于面向对象的解析方式
(2)json基本格式：
{"key":"value","":"","":""}
多个对象时[{"key":"value","":"","":""},{"key":"value","":"","":""},...,{"key":"value","":"","":""}]
三、展示表格
HTML代码
View Codejs代码
$("#Button1").click(function () {
$.ajax({
url: "sanji.ashx",
data: {},
type: "post",
dataType: "json",
success: function (data) {
$("#bd tbody").empty();//清空，防止重复加载
for (i in data) {
var ss = "<tr style=\"\">";
ss += "<td>" + data[i].usersname + "</td>";
ss += "<td>" + data[i].mima + "</td>";
ss += "<td>" + data[i].nc + "</td>";
ss += "<td>" + data[i].sex + "</td>";
ss += "<td>" + data[i].bir + "</td>";
ss += "<td>" + data[i].nation + "</td>";
ss += "</tr>";
$("#bd tbody").append(ss);
}
},//success
error: function () { alert("连接服务端shibai！"); }
});//ajax
return false;//我使用的Button不是使用表单元素，这句必须有！！！
});//click
一般处理程序
//引入的命名空间
using System.Linq;
using System.Collections;
using System.Collections.Generic;
using System.Text;
//代码
int count = 0;//作用是判断需不需加","
StringBuilder str = new StringBuilder();//省内存
str.Append("[");
using(LinQlianxiDataContext con=new LinQlianxiDataContext())
{
var list = con.Users.AsEnumerable();
foreach(Users u in list)
{
if (count > 0)
{
str.Append(",");
}
//拼写时注意！！注意！！注意！！另外在这里扩展属性
str.Append("{\"usersname\":\"" + u.UserName + "\",\"mima\":\"" + u.PassWord + "\",\"nc\":\"" + u.NickName + "\",\"sex\":\"" + u.Sexstr + "\",\"bir\":\"" + u.Birthdaystr + "\",\"nation\":\"" + u.Nationname+ "\"}");
count++;
}
}
str.Append("]");
context.Response.Write(str);
context.Response.End();
四、三级联动
注意：异步导致程序不是按代码顺序执行
//页面加载时调用执行
hanshu("0001", $("#DropDownList1"),"1");
//封装的方法，参数1：父级编号；参数2：控件；参数3：对应省市区
function hanshu(p,drop,n) {
$.ajax({
url: "ajax/sanji.ashx",
data: { "pcode":p},
type: "post",
dataType: "json",
success: function (data) {
drop.empty();
//省调用这个函数时执行n=="1"
if(n=="1"){
for(i in data)
{
var ss = "<option value=\""+data[i].acode+"\">"+data[i].aname+" </option>";
drop.append(ss);
}
hanshu($("#DropDownList1").val(), $("#DropDownList3"), "2"); //省改变时改变市
}//n==1
//市调用这个函数时执行n=="2"
if (n == "2") {
for (i in data) {
var ss = "<option value=\"" + data[i].acode + "\">" + data[i].aname + " </option>";
drop.append(ss);
}
hanshu($("#DropDownList3").val(), $("#DropDownList2"), "3");//市改变时改变区
}//n==2
//区调用这个函数时执行n=="3"
if (n == "3") {
for (i in data) {
var ss = "<option value=\"" + data[i].acode + "\">" + data[i].aname + " </option>";
drop.append(ss);
}
}//n==3
},//success
error: function () { alert("连接服务端错误！！");}
});//ajax
}
//省改变事件
$("#DropDownList1").change(function () {
hanshu($(this).val(), $("#DropDownList3"), "2");
});
//市改变事件
$("#DropDownList3").change(function () {
hanshu($(this).val(), $("#DropDownList2"), "3");
});
标签：工作 ati name 调用 indicator hang stringbu else 返回
原文地址：http://www.cnblogs.com/lulichao/p/6060311.html
