1.load方法
2.get方法
3.post方法
4.ajax方法
load方法
get方法
$.post(请求的地址,请求的参数,回调函数,服务器返回值类型)
服务器返回值类型:
html: html文本
Json:json数据格式对象
xml:xml文档
script:js脚本
money.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="js/common/jquery-3.2.1.min.js"></script>
<script>
$(function(){
setInterval(function(){
quoto();
}, 2000);
});
function quoto(){
$.post("ajaxposttest",function(data){
$("#tb").html("");
console.log(1);
for(var i=0;i<data.length;i++){
console.log(data[i]);
var loc = data[i].loc;
var pri = data[i].price;
var tr_ele = $("<tr>"+
"<td>"+loc+"</td>"+
"<td>"+pri+"</td>"+
"</tr>"
);
$("#tb").append(tr_ele);
}
},"JSON");
}
</script>
<style>
#tr0{
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr id="tr0">
<th>大区</th>
<th>换算值</th>
</tr>
<tbody id="tb">
</tbody>
</table>
</body>
</html>Jqpost.java
package com.baidu.servlet;
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 com.alibaba.fastjson.JSON;
import com.baidu.entity.Money;
public class Jqpost extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Random r = new Random();
List<Money> ls = new ArrayList<Money>();
for(int i=0;i<4;i++) {
String s = "大区"+r.nextInt(10);
int pri = r.nextInt(10);
Money m = new Money();
m.setLoc(s);
m.setPrice(pri);
ls.add(m);
}
response.setContentType("text/html;charset=utf-8");
String js = JSON.toJSONString(ls);
PrintWriter out = response.getWriter();
out.print(js);
out.flush();
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
Money.java
package com.baidu.entity;
public class Money {
public String loc;
public int price;
public String getLoc() {
return loc;
}
public void setLoc(String loc) {
this.loc = loc;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
@Override
public String toString() {
return "Money [loc=" + loc + ", price=" + price + "]";
}
}
ajax方法
语法:
$.ajax({});
{}可以设置的参数
- url :请求的地址
- type: 请求的方式(post,get)
- data: data请求的参数
- dataType: 服务器返回的数据类型
- success: 服务器处理正常对应的回调函数
- error : 服务器出错对应的回调函数
- async: true(默认值), 当值为false时发送同步请求
jqajax.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="js/common/jquery-3.2.1.min.js"></script>
<script>
$(function(){
setInterval(function() {
quoto();
}, 2000);
});
function quoto(){
$("#table1 tr[id!=tr1]").remove();
$.ajax({
"url":"UserAjaxServlet",
"type":"post",
"dataType":"JSON",
"success":function(data){
for(var i=0;i<data.length;i++){
var name = data[i].name;
var gender = data[i].gender;
var age = data[i].age;
var td_ele1 = "<td>"+name+"</td>";
var td_ele2 = "<td>"+gender+"</td>";
var td_ele3 = "<td>"+age+"</td>";
var tr = $("<tr>"+td_ele1+td_ele2+td_ele3+"</tr>");
var tab = $("#table1");
tab.append(tr);
}
},
"error":function(){
alert("响应失败");
}
});
}
</script>
<style>
#d1{
width:600px;
margin:20px auto;
background-color:green;
}
table{
width:600px;
}
#tr1{
background-color:orange;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="d1">
<table id="table1" >
<tr id="tr1">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</table>
</div>
</body>
</html>User.java
package com.baidu.entity;
public class User {
private String name;
private String gender;
private int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
UserAjaxServlet.java
package com.baidu.servlet;
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 com.alibaba.fastjson.JSON;
import com.baidu.entity.User;
public class UserAjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
public String sGetGender() {
Random r = new Random();
int i=r.nextInt(2)+1;
String s = null;
if(i%2==0) {
s = "nan";
}else {
s = "nv";
}
return s;
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
Random r = new Random();
List<User> ls = new ArrayList<User>();
for(int i=0;i<8;i++) {
String name = "玩家" + r.nextInt(10);
String gender = sGetGender();
int age = r.nextInt(20);
User user = new User();
user.setName(name);
user.setGender(gender);
user.setAge(age);
ls.add(user);
}
String js = JSON.toJSONString(ls);
PrintWriter out = response.getWriter();
out.print(js);
out.flush();
out.close();
}
}
