$.ajax()
提交AJAX请求
1)用法
$.ajax({});
{}是一个对象,用来指定一些选项参数(控制ajax对象如何向服务器
发送请求)。常见的选项参数有如下一些:
a. url 指定请求地址,比如"quoto.do"。
b. type 指定请求类型,比如"get",“post”。
c. data 指定请求参数,有两种写法:
写法1: 请求字符中的形式,比如 “uname=Sally”
写法2: 对象形式,比如 {“uname”:“Sally”}
d. dataType 指定服务器返回的数据类型:
json json字符串
text 文本
html html文档
xml xml文档
script javascript脚本
e. success 指定一个函数,用来处理服务器返回的数据。
注:当ajax对象收到了服务器返回的所有数据,并且
服务器处理成功。
f. error 指定一个函数,用来处理服务器发生异常的情况。
g. async 指定同步还异步,缺省值是true(异步)。
get请求
1.下载jquery.js
2.使用jquery封装的Ajax进行异步的get请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户名注册重复校验</title>
<script src="js/jquery-1.4.3.js"></script>
<script>
function check(){
$.ajax({
url:'check',
type:'GET',
data:{
"uname":$("#uname").val()
},
dataType:"text",
success:function(data){
$('#msg').html(data);
}
});
}
</script>
</head>
<body style="font-size:20px;">
<form action="" method="post">
<fieldset>
<legend>注册</legend>
用户名:<input id="uname" name="uname" onblur="check();"/>
<span id="msg" style="color:red;"></span>
<br/>
密码:<input type="password" name="pwd"/><br/>
<input type="submit" value="确定"/>
</fieldset>
</form>
</body>
</html>
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/check")
public class UserServlet extends HttpServlet {
public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置请求编码格式
req.setCharacterEncoding("UTF-8");
// 设置响应编码格式
resp.setContentType("text/html;charset=utf-8");
resp.setCharacterEncoding("UTF-8");
// 获取请求信息
String uname = req.getParameter("uname");
if ("sally".equals(uname)) {
resp.getWriter().println("改用户名已被注册!");
} else {
resp.getWriter().println(uname + "注册成功!");
}
}
}
测试
post请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户名注册重复校验</title>
<script src="js/jquery-1.4.3.js"></script>
<script>
function check(){
$.ajax({
url:'check',
type:'POST',
data:{
"uname":$("#uname").val()
},
dataType:"text",
success:function(data){
$('#msg').html(data);
}
});
}
</script>
</head>
<body style="font-size:20px;">
<form action="" method="post">
<fieldset>
<legend>注册</legend>
用户名:<input id="uname" name="uname" onblur="check();"/>
<span id="msg" style="color:red;"></span>
<br/>
密码:<input type="password" name="pwd"/><br/>
<input type="submit" value="确定"/>
</fieldset>
</form>
</body>
</html>
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/check")
public class UserServlet extends HttpServlet {
public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置请求编码格式
req.setCharacterEncoding("UTF-8");
// 设置响应编码格式
resp.setContentType("text/html;charset=utf-8");
resp.setCharacterEncoding("UTF-8");
// 获取请求信息
String uname = req.getParameter("uname");
if ("sally".equals(uname)) {
resp.getWriter().println("此用户名已被注册!");
} else {
resp.getWriter().println(uname + "注册成功!");
}
}
}
测试
完整的Ajax请求模板
$.ajax({
url:"http://www.microsoft.com", //请求的url地址
dataType:"json", //返回格式为json
async:true,//请求是否异步,默认为异步,这也是ajax重要特性
data:{"id":"value"}, //参数值
type:"GET", //请求方式
beforeSend:function(){
//请求前的处理
},
success:function(req){
//请求成功时处理
},
complete:function(){
//请求完成的处理
},
error:function(){
//请求出错处理
}
});
$.get()
使用get方式提交ajax
//语法
$.get(URL,data,function(data,status,xhr),dataType)
获取随机数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机数</title>
<script src="js/jquery-1.4.3.js"></script>
<script>
function getNumber() {
$.get('getNumber', {
"r" : Math.random()
}, function(result) {
$('#msg').html(result);
});
}
</script>
</head>
<body style="font-size: 20px;">
<a href="javascript:getNumber();">点这儿,显示一个随机整数</a>
<div id="msg"></div>
</body>
</html>
package web;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/getNumber")
public class RandomAction extends HttpServlet {
public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
resp.setCharacterEncoding("UTF-8");
Random r=new Random();
int random=r.nextInt(1000);
System.out.println(random);
resp.getWriter().println("此次随机数为:"+random);
}
}
测试
点击链接,页面显示当前的随机数
$.post
//语法
$.post(URL,data,callback);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机数</title>
<script src="js/jquery-1.4.3.js"></script>
<script>
function getNumber() {
$.post('getNumber', {
"r" : Math.random()
}, function(data) {
$('#msg').html(data);
})
}
</script>
</head>
<body style="font-size: 20px;">
<a href="javascript:getNumber();">点这儿,显示一个随机整数</a>
<div id="msg"></div>
</body>
</html>
package web;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/getNumber")
public class RandomAction extends HttpServlet {
public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
resp.setCharacterEncoding("UTF-8");
Random r=new Random();
int random=r.nextInt(1000);
System.out.println(random);
resp.getWriter().println("此次随机数为:"+random);
}
}
测试
load()
向服务器发送异步请求,并且将服务器返回的数据直接添加到
符合要求的节点之上。
1)用法
$obj.load(url,[data]);
注:
url:请求地址,比如 “getNumber.do”
data:请求参数,有两种写法(同上) 。
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>股票实时行情</title>
<script src="js/jquery-1.4.3.js"></script>
<style>
#d1 {
width: 450px;
height: 350px;
background-color: black;
margin-left: 400px;
margin-top: 10px;
}
#d2 {
color: yellow;
background-color: red;
height: 40px;
}
table {
color: #FFF;
font-style: italic;
font-size: 24px;
}
</style>
<script>
$(function() {
//页面加载完成,每隔5秒,执行quoto函数
setInterval(quoto, 5000);
});
/*
向服务器发送异步请求,并且将服务器返回的json字符串解析出来,然后更新表格
*/
function quoto() {
$.ajax({
"url" : "quoto",
"type" : "post",
"dataType" : "json",
"success" : function(data) {
/*
用来处理服务器返回的数据
data:服务器返回的数据。
注:
如果服务器返回的是json字符串,
会自动转换成相应的js对象。
*/
$('#tb1').empty();
for (i = 0; i < data.length; i++) {
var s = data[i];
$('#tb1').append(
'<tr><td>' + s.code + '</td><td>' + s.name
+ '</td><td>' + s.price + '</td></tr>');
}
},
"error" : function() {
//处理异常
}
});
}
</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>
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.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import pojo.Stock;
/**
*
*/
@WebServlet("/quoto")
public class LoadACtion extends HttpServlet {
private static final long serialVersionUID = 1L;
public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"));
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.println("action:" + action);
List<Stock>stocks=new ArrayList<Stock>();
Random r=new Random();
for(int i=0;i<8;i++) {
Stock stock=new Stock();
stock.setCode("60087"+r.nextInt(10));
stock.setName("中国嘉陵"+r.nextInt(10));
stock.setPrice(r.nextInt(1000));
stocks.add(stock);
}
//使用jackson提供的api来转换
ObjectMapper orm=new ObjectMapper();
String jsonStr=orm.writeValueAsString(stocks);
System.out.println(jsonStr);
//将字符串发送给浏览器
out.println(jsonStr);
}
}
测试