Ajax异步
SSM中ajax
$.ajax({
"url":"${pageContext.request.contextPath}/orders/delivery",
"type":"POST",
"data":"idChecked="+idChecked,
("data":{updataOrder:$(this).val(),orderId:orderId,tdIndex:tdIndex},多个参数方式)
"dataType":"json",
"success":function(data){
$("#refresh").click();
}
})
Servlet
package Servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserServlet extends HttpServlet{
public void doPost(HttpServletRequest request,HttpServletResponse response){
this.doGet(request, response);
}
public void doGet(HttpServletRequest request,HttpServletResponse response){
String name=request.getParameter("name");
boolean used=false;
if(name.equals("Ajax")){
used=true;
}else{
used=false;
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=null;
try {
out = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.print(used);
out.flush();
out.close();
}
}
HTML
GET
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="jquery-3.2.1.js" type="text/javascript"></script>
<script>
function yanzheng() {
var name=$("#name").val();
if(name==""&&name==null){
$("#nameDiv").html("输入不能为空");
}else{
xmlHttpRequest=new XMLHttpRequest();
xmlHttpRequest.onreadystatechange=callBack;
var url="UserServlet?name="+name;
xmlHttpRequest.open("GET", url, true);
xmlHttpRequest.send(null);
function callBack(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var data=xmlHttpRequest.responseText;
if(data=="true"){
$("#nameDiv").html("用户名已经被使用");
}
else{
$("#nameDiv").html("用户名可以被使用");
}
}
}
}
}
</script>
</head>
<body>
<form action="" method="get">
<input name="name" id="name" onblur="yanzheng()">
<div id="nameDiv"></div></form> <br>
</body>
</html>
POST
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="jquery-3.2.1.js" type="text/javascript"></script>
<script>
function yanzheng() {
var name=$("#name").val();
if(name==""){
$("#nameDiv").html("输入不能为空");
}else{
xmlHttpRequest=new XMLHttpRequest();
xmlHttpRequest.onreadystatechange=callBack;
var url="UserServlet";
xmlHttpRequest.open("POST", url, true);
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data="name="+name;
xmlHttpRequest.send(data);
function callBack(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var data=xmlHttpRequest.responseText;
if(data=="true"){
$("#nameDiv").html("用户名已经被使用");
}
else{
$("#nameDiv").html("用户名可以被使用");
}
}
}
}
}
</script>
</head>
<body>
<form action="" method="POST">
<input name="name" id="name" onblur="yanzheng()">
<div id="nameDiv"></div></form> <br>
</body>
</html>
web.xml配置
<servlet>
<servlet-name>UserServlet</servlet-name>
<servlet-class>Servlet.UserServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UserServlet</servlet-name>
<url-pattern>/UserServlet</url-pattern>
</servlet-mapping>
