jQuery学习第5课Ajax说明

JQuery提供了几个ajax函数，这些函数彼此相似，但是为了处理不同类型的数据而被分开。最简单的是GET(url、参数、回调)，它发起GET请求，并将服务器返回的数据传递给回调进行处理。下面的示例意识到，当鼠标悬停在超链接上时，它会启动一个ajax请求，并从服务器返回关于超链接的更多介绍。先看服务器端代码，新建一个ajaxload.ashx只是举个例子，得到查询参数为word的值，返回：复制的代码如下：% @ web handler language=' c# ' class=' Ajax load ' %使用system使用系统。Web公共类Ajax load : IHttpHandler { public void process request(HttpContext context){ context。响应。内容类型='文本/纯文本'；字符串单词=上下文。请求参数[' word ']；语境。响应。写入(字符串。格式(' p style=' color:red这里有{0}的更多介绍./p '，word))；} public bool IsReuse { get { return false；}}}前台代码如下：复制的代码如下： head title Ajax text/title script type=' text/JavaScript ' src=' http : jquery-1 . 3 . 2 . js '/script type=' text/JavaScript ' $(function(){ $(' a ')。悬停(函数(事件){ $。get('ajaxload.ashx '，{ word: $(event.target))。html() }，函数(数据){ $('#result ')。html(数据)；});}，function() { $('#result ')。html(“”)；});});/script/head body A href=' JavaScript : void(0)' China/ABR/A href=' JavaScript : void(0)' USA/ABR/A href=' JavaScript : void(0)' Japan/ABR/A href=' JavaScript : void(0)' China/ABR/div id=' result '/div/body，将鼠标依次滑过日本和中国，可以清楚地看到已经发起了两个get请求Jquery对参数进行编码，并将它们传输到服务器。在jQuery的帮助下，ajax是如此简单。

在这个例子中，服务器返回一个html片段，前台将这个html片段插入到页面中。事实上，服务器可以返回任何格式的数据，只要它是在前台处理的。在各种数据格式中，尤其常用的是JSON格式。关于JSON格式本身，本文就不多介绍了。简单来说，JSON格式非常类似于javascript中的对象文字。{}表示对象，[]表示数组。实现三级联动下拉菜单。先看最终效果：

这是一个捆绑商品选择器。首先选择第一个属性Game，然后选择Server，最后选择Amount。服务器如何从数据库中找到合适的数据并将其序列化为JSON数据并不是本文的重点。服务器可以响应以下请求，返回的数据也可以看到。这些是JSON的典型格式：。

第一个请求返回比赛的列表，第二个请求返回计算机网络服务器的列表，第三个稍微复杂一点，返回了很多信息，其中显示名称是用来显示在列表中的，标识是列表的价值值，其余的没有用到。例如：复制代码代码如下：金额：选择选择名称=' SelectAmount ' id=' SelectAmount '选项值=' 45 ' 10 Mil/选项值=' 46 ' 20 Mil/选项/选择下面介绍前台的实现。下拉列表框的超文本标记语言代码如下：复制代码代码如下： div ID=' bannerrivechart _ content ' p game : select ID=' select game '/select/p server : select ID=' select server '/select/p amount : select ID=' select mount ' name=' select mount '/select/p asp3360 button ID=' ButtonFasyBuy ' CSS class=' BTN _ default ' runat=' server ' Text='立即购买' OnClick=' ButtonFasyBuy _ Click '/p为三个下拉列表写好事件处理函数，首先要加载比赛列表：复制代码代码如下：函数LoadGame() { $ .getJSON('FastBuy.ashx '，函数（数据){ var sel=$(' # SelectGame ')[0]；sel.innerHTML=$。每个（数据、函数(入口索引，条目)){ var op=新选项(条目)；出售。选项。添加(执行部分第10段)；});$('#SelectGame')[0].selectedIndex=0；var game=$('#SelectGame ').val()；LoadServer(游戏);});} 首先清空当前列表，$.每个函数能够遍历第一个参数中的每个值，依次调用第二个参数的函数。并把值传给进入参数。此时框架已经把数据数据解析成爪哇岛描述语言对象，这里是一个字符串的数组函数LoadServer(游戏){ 0复制代码代码如下： $.getJSON('FastBuy.ashx '，{Game:game}，函数（数据){ var sel=$(' # SelectServer ')[0]；sel.innerHTML=$。每个（数据、函数(入口索引，条目)){ var op=新选项(条目)；出售。选项。添加(执行部分第10段)；});$('#SelectServer')[0].selectedIndex=0；装载量(游戏，$('#SelectServer ').val())；});} 加载计算机网络服务器数据的过程是类似的。复制代码代码如下：函数装载量(游戏，服务器){ $。getJSON('FastBuy.ashx '，{Game:game，Server:server}，函数（数据){ var sel=$(' # selectmount ')[0]；sel.innerHTML=$。每一个（数据、函数(entryIndex，条目){ var op=new Option(条目[' amounter ']，条目[' ID '])；出售。选项。添加(执行部分第10段)；});});} 最后是加载金额，这里稍微有一点不同，此时数据中的数据不是简单的字符串了，而是一个有属性的对象，可以用条目['标识]这样的表达式来获取表达式。在这个例子中，条目['标识]就是一个简单的数字了。当然它完全可以是另一个复杂的对象或者数组，依服务器返回的数据数据而定。有了这些准备工作，我们只要在准备好的函数中为下拉列表注册下处理函数了：复制代码代码如下：美元（文件)。ready(function(){ $(' # SelectServer ')).change(function(){ load amount($(' # SelectGame '))).val()，$('#SelectServer ').val())；});$('#SelectGame ').change(function(){ LoadServer($(' # SelectGame '))).val())；});LoadGame()；});至此，一个三级联动下拉单完成了jQuery。还有一个$.邮政函数，用法和得到一样，只是它发起的是邮政请求。