jQuery之ajax编程

来源：互联网发布：域名服务器机型编辑：程序博客网时间：2024/05/21 14:00

jQuery之ajax编程

1.load

a,作用:将服务器返回的数据直接插入到符合要求的节点之上，相当于obj.innerHTML = 服务器返回的数据。

b,用法：

$obj.load(请求地址,[请求参数]);

请求地址：服务器上某个组件的地址

请求参数：两种形式，

请求字符串形式："name=zs&age=22"

对象的形式：{'name':'zs','age':22}

load方法：当没有请求参数时，会使用get方式向服务器发请求，如果没有请求参数，会使用post方法服务器发请求。

示例代码：/jQuery_ajax/WebRoot/load.jsp

<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %><html><head><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(function(){$('a.s1').click(function(){var $obj = $(this).next();//alert($obj.text());if($obj.text()==''){var airline = $(this).parent().siblings().eq(0).text();//load:将服务器返回的数据直接插入到符合要求的 节点之上，//相当于obj.innerHTML = 服务器返回的数据。$obj.load('priceInfo.do','airline='+airline);}else{$obj.text('');}});});</script></head><body><table cellpadding="0" cellspacing="0"width="60%" border="1"><tr><td>航班号</td><td><a href="#">机型</a></td><td>起飞时间</td><td>到达时间</td><td> </td><td>经济舱价格</td><td> </td></tr><tr><td>CA1000</td><td><a href="#">波音777</a></td><td>8:00 am</td><td>10:00 am</td><td><a href="javascript:;" class="s1">显示所有票价</a><div></div></td><td>￥1200</td><td><input type="button" value="订票"/></td></tr><tr><td>MU1494</td><td><a href="#">空客310</a></td><td>18:00 pm</td><td>21:00 pm</td><td><a href="javascript:;" class="s1">显示所有票价</a><div></div></td><td>￥800</td><td><input type="button" value="订票"/></td></tr></table></body></html>

2.$.get方法

a,作用：使用get方式向服务器发异步请求

b,用法：$.get(url,[data],[callback],[type]);

url：请求地址

data：请求参数，格式同上

callback：回调函数，格式:function(data,statusText),其中,data是服务器返回的数据,statusText是服务器处理的状态。

type：服务器返回的数据的类型
html/text(文本)/json(json字符串)/xml/script(javascript脚本)

$.post方法(格式同上，使用post方式向服务器发异步请求)

用法同上

$.get/$.post方法的缺点：只能处理异步请求，不能处理系统异常。

示例代码：/jQuery_ajax/WebRoot/stock.jsp

<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %><html><head><style type="text/css">#d1{width:400px;height:300px;border:1px solid #ccc;background-color:#fff8ac;}#d2{font-size:20px;text-align:center;}</style><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(function(){setInterval(quoto,3000);});function quoto(){//$.get方法:使用get方式向服务器发请求。//$.get/$.post/$.ajax函数会自动将服务器返回的//json字符串转换成js对象。$.post('emp.do',function(data){//data：服务器返回的数据$('#tb1').empty();for(var i=0;i<data.length;i++){$('#tb1').append("<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td><td>"+data[i].flag+"</td></tr>");}},'json');}</script></head><body><div id="d1"><div id="d2">最新入职员工信息</div><div id="d3"><table border="1px"><thead><tr><td>姓名</td><td>年龄</td><td>是否毕业</td></tr></thead><tbody id="tb1"></tbody></table></div></div></body></html>

3.$.ajax方法

用法：$.ajax({javascript对象})

选项参数如下：

url(string):请求地址

type(string):GET/POST

data(object/string):请求参数

dataType(string):服务器返回的数据的类型

sunccess(function)：请求成功后调用的回调函数

function(data,textStatus)有两个参数：

data是服务器返回的数据，textStatus是服务器处理的状态。

error(function):请求失败后调用的回调函数

function(xhr,textStatus,errorThrown)有三个参数：

xhr:底层的XMLHttpRequest对象。

textStatus:错误的描述。

errorThrown:一般为null。

async:true(缺省)/false

true:异步

false:同步

代码示例：

<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %><html><head><style type="text/css">table{margin-left:200px;margin-top:80px;font-size:24px;}.selected{background-color:#fff8dc;}</style><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">$(function(){$('#key').keyup(function(){//alert('aaa');$.ajax({'url':'find.do','data':'key='+$('#key').val(),'type':'post','dataType':'text','success':function(data){//data:小学生,小学生手册,小学生时代//分解服务器返回的数据，将这些数据作为提示项//添加到tips(div)下。var arr = data.split(',');$('#tips').empty();for(var i=0;i<arr.length;i++){$('#tips').append("<div class='item'>"+arr[i]+"</div>");}//当光标经过提示项时，加亮$('.item').mouseenter(function(){$(this).addClass('selected').siblings().removeClass('selected');});//当鼠标点击某个选项时，将该选项的值复制到key$('.item').click(function(){$('#key').val($(this).text());$('#tips').empty();});}});});});</script></head><body><table cellpadding="0" cellspacing="0"><tr><td><input name="key" id="key"/></td><td><input type="button" value="搜索"/></td></tr><tr><td colspan="2"><div id="tips"></div></td></tr></table></body></html>

0 0