ajax 基础
Posted 兔小灰385
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax 基础相关的知识,希望对你有一定的参考价值。
一、简介
AJAX = Asynchronous javascript and XML(异步的 JavaScript 和 XML)。
AJAX 是一种用于创建快速动态网页的技术。
AJAX通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
二、xml和json的作用:在不同语言之间进行数据传递
最早使用的数据类型是 xml
劣势:
1、代码量较大
2、结构不清晰
3、解析起来麻烦
现在使用的数据类型是 json
优势:
1、结构清晰
2、类似于面向对象的解析方式
json基本格式:
{"key":"value","":"","":""}
三、ajax应用实例
ajax展示数据库所有数据:
1.body中的代码
<table style="background-color:navy;text-align:center;width:90%;margin:auto;" id="tb1"> <thead> <tr style="color:white;"> <td>用户名</td> <td>密码</td> <td>昵称</td> <td>性别</td> <td>生日</td> <td>民族</td> </tr> </thead> <tbody> </tbody> </table> <input type="button" id="btn1" value="添加" />
2.js代码
<script type="text/javascript"> $("#btn1").click(function () { $.ajax({ url: "ajax/LoadUsers.ashx",//将数据要提交到哪个服务端 data: {},//将什么数据提交到服务端去 type: "post",//用什么样的方式将数据提交过去 dataType: "json",//返回一个什么样的数据类型 success: function (data) { //success $("#tb1 tbody").empty(); for (i in data) { var str = "<tr style=\\"background-color:white;\\">"; str += "<td>" + data[i].username + "</td>"; str += "<td>" + data[i].password + "</td>"; str += "<td>" + data[i].nickname + "</td>"; str += "<td>" + data[i].sex + "</td>"; str += "<td>" + data[i].birthday + "</td>"; str += "<td>" + data[i].nation + "</td>"; str += "</tr>"; $("#tb1 tbody").append(str); } },//success error: function () { alert(\'服务器连接失败!!!\'); } });//ajax });//btn1.click </script>
在js代码中,书写url链接地址时要注意仔细;在写success中的str字符串时,应注意其中的属性名不可写错;最后可以写error来方便找错。
3.LoadUsers.ashx代码
using System; using System.Web; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Text; public class LoadUsers : IHttpHandler { public void ProcessRequest (HttpContext context) { int count = 0; string end = "["; using (Data0720DataContext con = new Data0720DataContext()) { var ulist = con.Users; foreach(Users u in ulist) { if (count > 0) { end += ","; } end += "{\\"username\\":\\""+u.UserName+"\\",\\"password\\":\\""+u.PassWord+"\\",\\"nickname\\":\\""+u.NickName+"\\",\\"sex\\":\\""+u.Sex+"\\",\\"birthday\\":\\""+u.Birthday+"\\",\\"nation\\":\\""+u.Nation+"\\"}"; count++; } } end += "]"; context.Response.Write(end);//将json返回出去 context.Response.End();//结束输出 } public bool IsReusable { get { return false; } } }
在此部分的内容中,应注意的是:json字符串的拼写,其中,应格外注意转义字符(\\),双引号("")以及每行最后的逗号的位置,逗号的英文状态,并且,在输出多行数据时,应注意在字符串两侧加上([])。
ajax实现省市区三级联动

<div> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList> <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList> <asp:DropDownList ID="DropDownList3" runat="server"></asp:DropDownList> </div>

<script type="text/javascript"> bind1($("#DropDownList1"), \'0001\', \'1\'); function bind1(drop, pc, aa) { $.ajax({ url: "ajax/China.ashx", data: { "pcode": pc }, type: "post", dataType: "json", success: function (data) { if (aa == \'1\') { drop.empty(); for (i in data) { var str = "<option value=\\"" + data[i].code + "\\">" + data[i].name + "</option>"; drop.append(str); } bind1($("#DropDownList2"), $("#DropDownList1").val(), \'2\'); bind1($("#DropDownList3"), $("#DropDownList2").val(), \'3\'); } if (aa == \'2\') { drop.empty(); for (i in data) { var str = "<option value=\\"" + data[i].code + "\\">" + data[i].name + "</option>"; drop.append(str); } bind1($("#DropDownList3"), $("#DropDownList2").val(), \'3\'); } if (aa == \'3\') { drop.empty(); for (i in data) { var str = "<option value=\\"" + data[i].code + "\\">" + data[i].name + "</option>"; drop.append(str); } } }, error: function () { alert(\'服务器连接失败!\'); } }); } $("#DropDownList1").change(function () { bind1($("#DropDownList2"), $(this).val(), \'2\'); }); $("#DropDownList2").change(function () { bind1($("#DropDownList3"), $(this).val(), \'3\'); }); </script>

using System; using System.Web; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Text; public class China : IHttpHandler { public void ProcessRequest (HttpContext context) { string pcode = context.Request["pcode"]; System.Text.StringBuilder end = new StringBuilder(); int count = 0; end.Append("["); using (mydbDataContext con = new mydbDataContext()) { List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == pcode).ToList(); foreach (ChinaStates c in clist) { if (count > 0) end.Append(","); end.Append("{\\"code\\":\\"" + c.AreaCode + "\\",\\"name\\":\\"" + c.AreaName + "\\"}"); count++; } } end.Append("]"); context.Response.Write(end); context.Response.End(); } public bool IsReusable { get { return false; } } }
以上是关于ajax 基础的主要内容,如果未能解决你的问题,请参考以下文章