jQuery对ajax的支持
(1)$.ajax方法
用法: $.ajax({});
(2)load方法
向服务器发送异步请求,然后将服务器返回的数据直接添加到符合要求的 节点之上。
注意:这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的
代码如下:
采用方法(一):随机生成股票列表
实体类:
package bean;
public class Stock {
private String code;
private String name;
private int price;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
}
的服务端代码:
package web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import bean.Stock;
import net.sf.json.JSONArray;
public class ActionServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");//post请求时候解决中文乱码
//分析请求资源路径
//例如http://ip:port/ajax-day01/check.do (端口号后面的字符串为该路径)
String uri= request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();//获得输出流
if("/quoto".equals(action)){
//模拟生成几只股票的信息
List<Stock> list = new ArrayList<Stock>();
Random rand = new Random();
for(int i=0;i<8;i++){
Stock s = new Stock();
s.setCode("60087" + rand.nextInt(10));
s.setName("中国嘉陵" + rand.nextInt(10));
s.setPrice(10 + rand.nextInt(1000));
list.add(s);
}
//fromObject()方法可以传入集合或者传入数组
JSONArray jsonArr = JSONArray.fromObject(list);
String jsonStr = jsonArr.toString();
System.out.println(jsonStr);
out.println(jsonStr);
}else if("/luck".equals(action)){
Random rand = new Random();
int number = rand.nextInt(8888);
out.println(number);//返回text文本
}
out.close();
}
}
jsp:
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width:450px;
height:350px;
background-color:black;
margin-left:300px;
margin-top:20px;
text-align:center;
}
#d2{
background-color:red;
color:yellow;
}
table{
color:white;
font-style:italic;
font-size:24px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
//页面加载完成后会执行下面的代码(调用function方法)
setInterval(quoto, 2000);
});
/*
该函数通过调用ajax对象(XMLHttpRequest),向服务器发送异步请求
服务器返回一个描述股票信息的JSON字符串
通过解析JSON字符串获得股票信息,然后更新表格
*/
function quoto(){
/*
$.ajax({})方法里面传入一个参数,{}是一个用来描述请求参数的对象
常见的选项参数有如下几个:
url:请求地址
data:请求参数(有两种格式)
第一种格式:请求字符串,例如"adminCode=Sally"
第二种格式:请求对象,例如{"adminCode":"Sally"}
type:请求类型(get/post)
dataType:服务器返回的数据的类型(常见有以下几种)
text:文本数据
json:json字符串
html:html文档
xml:xml文档
javascript:javascript脚本
success:事件处理函数(当服务器处理正常,用来处理服务器返回的数据)
error:事件处理函数 (当服务器处理异常,用来处理服务器返回的数据)
*/
//利用jQuery提供的方法来发送异步请求
$.ajax({
"url":"quoto.do",
//此处没有请求参数
"type":"post",
"dataType":"json",
///此处会将json字符串转换为js对象,若次数返回text文本,则不会自动转换为js对象,需要自己调用parse()方法转换
"success":function(stocks){ //此处stocks为数组
//清空之前tbody中的数据
$("#tb1").empty();//html("")也可以
for(var i=0;i<stocks.length;i++){//此处length为属性,不是方法
var s = stocks[i]; //某一只股票
//更新表格
$("#tb1").append(
"<tr><td>" + s.code +
"</td><td>" + s.name +
"</td><td>" + s.price +
"</td></tr>"
);
}
}
});
}
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d2">股票行情</div>
<div id="d3">
<table width="100%">
<thead>
<tr>
<td>代码</td>
<td>名称</td>
<td>价格</td>
</tr>
</thead>
<tbody id="tb1">
</tbody>
</table>
</div>
</div>
</body>
</html>
测试结果:
采用方法(二):随机生成幸运数字
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p{
color:blue;
text-align:center;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("#a1").click(showNumber);
});
function showNumber(){
//注意IE缓存问题
//$("#num").load("luck.do",{"name":"Sally"}); 此处是POST请求
$("#result").load("luck.do?r=" + new Date().getTime());
}
</script>
</head>
<body>
<p><a href="#javascript:" id="a1">你的幸运数字是:</a></p>
<p id="result"></p>
</body>
</html>
测试结果: