jQuery学习笔记之五
jquery对ajax编程的支持
load(url) order.jsp
- 作用：将服务器返回的数据直接插入到符合要求的节点之上，相当于obj.innerHTML = 服务器返回的数据
- 用法：$obj.load(请求地址,[请求参数]);
- 请求地址：服务器上某个组件的地址
- 请求参数：有两种形式，第一种形式是请求字符串，”name = zs&age=22”第二种对象的形式：{‘name’:’zs’,’age’:’22’}
- load方法：当没有请求参数时，会使用GET方式向服务器发请求，如果有请求参数，会使用post方式向服务器发送请求。
xml配置
servlet
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(action.equals("/priceInfo")) {
String airline = request.getParameter("airline");
if(airline.equals("CA1000")) {
out.println("头等舱：￥2400
商务舱：￥2200");
}else {
out.println("头等舱：￥2200
商务舱：￥2000");
}
}jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<script type = "text/javascript" src = "js/jquery-1.7.min.js">script>
<script type="text/javascript">
$(function(){
$('a.s1').toggle(function(){
var airline = $(this).parent().siblings().eq(0).text();
$(this).next().load('priceInfo.do','airline='+ airline);
//$(this).next().load('priceInfo.do',{'airline':airline});
$(this).html('显示经济舱价格');
},function(){
$(this).next().empty();
$(this).html('显示所有票价');
});
});
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>CA1000td>
<td><a href="#">空客320a>td>
<td>18:00amtd>
<td>20:00amtd>
<td><a href="javascript:;" class = "s1">显示所有票价a>
<div>div>
td>
<td>￥800td>
<td><input type="button" value ="订票"/>td>
tr>
<tr>
<td>MU1494td>
<td><a href="#">波音777a>td>
<td>8:00amtd>
<td>10:00amtd>
<td><a href="javascript:;" class = "s1">显示所有票价a>
<div>div>
td>
<td>￥800td>
<td><input type="button" value ="订票"/>td>
tr>
table>
body>
html>$.get(url,[data],[callback],[type]):其中，callback格式 function stock.jsp
- 作用：使用get方式向服务器端发请求
- 用法：$.get(url,[data],[callback],[type])
- url：请求地址
- [data]：请求参数
- [callback]：回调函数function(data,statusText)
- data:是服务器返回的数据
- statusText：是服务器处理的状态
- [type]：服务器返回的数据的类型 html:返回的是一个html内容
- text：返回的是text
- json：返回的是json字符串
- xml：返回的是一个xml文档
- script：返回的是一个javascript脚本
$.post()格式同上
- 使用post方式向服务器端发请求
配置xml
servlet层
Stock类
package bean;
public class Stock {
private String name;
private String code;
private double price;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
}else if(action.equals("/quoto")) {
//模拟生成八只股票的价格信息
//然后将这些信息转换成json字符串，并发送到客户端
List stocks = new ArrayList();
Random r = new Random();
DecimalFormat df = new DecimalFormat("#.##");
for(int i=0;i<8;i++) {
Stock s = new Stock();
s.setName(("深发展")+r.nextInt(10));
s.setCode("60001"+r.nextInt(10));
double price = r.nextInt(100)+r.nextDouble();
s.setPrice(Double.parseDouble(df.format(price)));
stocks.add(s);
}
JSONArray arr = JSONArray.fromObject(stocks);
String jsonStr = arr.toString();
out.println(jsonStr);
} jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type = "text/javascript" src = "js/jquery-1.7.min.js">script>
<script type = "text/javascript" src = "js/my.js">script>
<title>Insert title heretitle>
<style type="text/css">
#d1{
width:500px;
height: 550px;
background-color: #fff8dc;
border: 1px solid red;
margin-left: 300px;
margin-top: 100px;
}
table {
font-size:18px;
font-style:italic;
}
style>
<script type="text/javascript">
$(function(){
setInterval(quoto,3000);
});
function quoto(){
$.post('quoto.do',function(data){
//$.get()$.post $.ajax会自动将服务器返回的json字符串转换成js对象
//data是服务器返回的数据
$('#tb1').empty();
for(i = 0;i'#tb1' ).append(''+data[i].name+' '+data[i].code+' '+data[i].price+' $.ajax(options):options是一个形如{key1:value1,key2:value2}
- 用法：$.ajax({}); 选项参数如下：
- url(string):请求地址
- type(string):GET/POST
- data(object/string):请求参数
- dataType(string):预期服务器返回的数据类型，一般有：
- html，text，json
- success(function):
- data:服务器返回的数据
- textStatus：描述状态的字符串
- error(function):
- xhr:底层的XMLHttpRequest对象
案例，搜索时根据关键字会出现相应提示
xml
servlet
else if(action.equals("/find")) {
String key = request.getParameter("key");
if(key.equals("小")) {
out.println("小学生作文,小米,小米2,小学生守则");
}else if(key.equals("小学")) {
out.println("小学生早恋,小学生上吊,小学生哭爹喊娘");
}
}
out.close();jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type = "text/javascript" src = "js/jquery-1.7.min.js">script>
<title>Insert title heretitle>
<style type="text/css">
table {
margin-left: 200px;
margin-top: 80px;
font-size: 24px;
}
.select{
background-color: red;
}
style>
<script type="text/javascript">
$(function(){
//版本产生的bug导致切换中文时，keyup无法使用
$('#key').keyup(function(){
$.ajax({
type:'post',
url:"find.do",
data:{"key":$("#key").val()},
dataType:"text",
success:function(data){
var arr = data.split(',');
$('#tips').empty();
for(i=0;i'#tips' ).append(""+arr[i]+"");//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
}
//加亮光标经过的div
$('.s1').mouseenter(function(){
$(this).addClass('select').siblings().removeClass('select');
});
//当光标点击某个选项是，将该选项的值复制到key
$('.s1').click(function(){
$('#key').val($(this).text());
$('#tips').empty();
});
}
});
});
});
script>
head>
<body style = "font-size: 30px;">
<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>