一、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 == "") {
$("#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()>){
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代码

 <table style="background-color:navy;text-align:center;width:90%;margin:auto;">
<thead>
<tr style="color:white;">
<td>用户名</td>
<td>密码</td>
<td>昵称</td>
<td>性别</td>
<td>出生日期</td>
<td>民族</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<asp:Button ID="Button1" runat="server" Text="加载" />

js代码

 $("#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=\"background-color:white;\">";
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 = ;//作用是判断需不需加","
StringBuilder str = new StringBuilder();//省内存
str.Append("[");
using(LinQlianxiDataContext con=new LinQlianxiDataContext())
{
var list = con.Users.AsEnumerable();
foreach(Users u in list)
{
if (count > )
{
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("", $("#DropDownList1"),"");
//封装的方法,参数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==""){
for(i in data)
{
var ss = "<option value=\""+data[i].acode+"\">"+data[i].aname+" </option>";
drop.append(ss);
}
hanshu($("#DropDownList1").val(), $("#DropDownList3"), ""); //省改变时改变市
}//n==1
//市调用这个函数时执行n=="2"
if (n == "") {
for (i in data) {
var ss = "<option value=\"" + data[i].acode + "\">" + data[i].aname + " </option>";
drop.append(ss);
} hanshu($("#DropDownList3").val(), $("#DropDownList2"), "");//市改变时改变区
}//n==2
//区调用这个函数时执行n=="3"
if (n == "") {
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"), "");
});
//市改变事件
$("#DropDownList3").change(function () {
hanshu($(this).val(), $("#DropDownList2"), "");
});

Ajax1的更多相关文章

  1. ajax-1:基本实现原理

    一.什么是Ajax? Asynchronous JavaScript and XML(异步JavaScript和XML) 二.实现步骤 3.Open方法 三个参数的含义 1.提交方式 Form-met ...

  2. Ajax--1

    1.Ajax:组合利用javascript.XML和DOM等技术,在无需要刷新页面的前提下实现浏览器与服务器通信.它在用户和服务器之间引入了一个中间层,负责转发用户界面和服务器之间的交互.在服务器处理 ...

  3. 新手学ajax1

       学习的动力是最近想实现servlet向js传值,是html中的js,因为jsp是可以直接调用java 类的,在网上搜索了好久感觉ajax能帮我实现. 以下代码可以实现js向服务器发出一 requ ...

  4. ajax1—php(27)

    一 简介 web程序工作原理图: 传统的web程序工作原理图: Ajax工作原理图: 1.  关于Ajax l  Asynchronous 异步 l  JavaScript l  And l  XML ...

  5. ExtJs控件属性配置详细

    序言:    1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善). Ext.form.TimeField: 配置项:            ...

  6. jQuery源码分析系列(31) : Ajax deferred实现

    AJAX的底层实现都是浏览器提供的,所以任何基于api上面的框架或者库,都只是说对于功能的灵活与兼容维护性做出最优的扩展 ajax请求的流程: 1.通过 new XMLHttpRequest 或其它的 ...

  7. 从 AJAX 到 JSONP的基础学习

    目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 ...

  8. asp.net WebService+Ajax调用

    default.aspx 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&qu ...

  9. jquery管理ajax异步-deferred对象

    今天跟大家分享一个jquery中的对象-deferred.其实早在jquery1.5.0版本中就已经引入这个对象了.不过可能在实际开发过程中用到的并不多,所以没有太在意. 这里先不说deferred的 ...

随机推荐

  1. Stanford NLP学习笔记:7. 情感分析(Sentiment)

    1. 什么是情感分析(别名:观点提取,主题分析,情感挖掘...) 应用: 1)正面VS负面的影评(影片分类问题) 2)产品/品牌评价: Google产品搜索 3)twitter情感预测股票市场行情/消 ...

  2. 【转】EXCEL不显示科学计数法

    源地址:http://jingyan.baidu.com/article/e4d08ffdcc304e0fd3f60d69.html 2法无效,不知道为何

  3. CSS第二章

    1. 文本与字体属性: text-decoration:文本修饰线  none(去除修饰线).underline(下划线).overline(上划线).line-through(删除线) color: ...

  4. Django RedirectView

    RedirectView作用是重定向一个指定,给定的Url.这个给定的Url可能包含有字典风格的字符串,因为关键字(词)会被改变,所以从这个Url中捕获的参数可能也会被修改,例如,Url中的“%”应该 ...

  5. 尚学堂Spring视频教程(四):使用Annotation

    之前我们的bean都配置在XML里,并且通过bean的property标签来指定依赖关系,如果项目很大,那岂不是要配置很多这样的property标签?Spring提供了注解的方式来解决这个问题 @Au ...

  6. 剑指Offer:面试题33——把数组排成最小的数(java实现)(未完待续)

    问题描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路1: ...

  7. Add Office 365 Azure Directory into Windows Azure

    Add Office 365 Azure Directory into Windows Azure Pre-Requisite: 1.Azure Subscription to the Microso ...

  8. Hibernate中的数据库方言(Dialect)

    在配置hibernate.cfg.xml时需指定使用数据库的方言: 例: <property name="dialect">org.hibernate.dialect. ...

  9. dedecms讲解-arc.listview.class.php分析,列表页展示

    ./plus/list.php - 动态展示栏目列表页(也可能是频道封面)arc.listview.class.php 是dedecms的列表页的相关处理类__construct()         ...

  10. Foundation ----->NSNumber

    /*--------------------NSNumber--------------------*/     //包装基本数据类型          //1.创建number对象     //12 ...