您的位置：首页 > Web前端 > JQuery

jQuery之ajax编程

2015-12-16 16:15 597 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航