之前在网上找ajax的一些例子感觉说的都很凌乱或者很散,所以在这里写一个比较完整的例子,一是自己总结,二是可以帮到别人。
大致说明一下这个例子,是一个简单的注册案例,当用户名文本框失去焦点的时候,会向后台发送一个ajax请求(前台做了用户名非空的校验),如果用户名是3127,会提示你当前用户名已被占用,如果不为3127,提示你当前用户名可以使用。
前端代码
<%--
Created by IntelliJ IDEA.
User: 3127
Date: 2017/4/23
Time: 14:57
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%
String path=request.getContextPath();
%>
<title></title>
<script type="text/javascript" src="<%=path%>/jquery/jquery.min.js"></script>
<style>
#username-info{
display: none;
border: none;
}
label{
display: block;
margin-top: 3px;
}
</style>
</head>
<body>
<form id="myForm">
<label for="username">username:<input type="text" id="username"/><input type="text" id="username-info"/></label>
<label for="password">password:<input type="text" id="password"/></label>
</form>
<script>
$("#username").on("blur",function(){
var username=$("#username").val();
if(username!=undefined&&username.length>0){
$.ajax({
type:"post",//type可以为post也可以为get
url:"demo2",
data:{"username":username},//这行不能省略,如果没有数据向后台提交也要写成data:{}的形式
dataType:"json",//这里要注意如果后台返回的数据不是json格式,那么就会进入到error:function(data){}中
success:function(data){
$("#username-info").css("display","block");
if(data.availiable==="0"){
$("#username-info").css("color","green");
}else{
$("#username-info").css("color","red");
}
$("#username-info").val(data.info);
},
error:function(data){
alert("用户名提交出现了错误!");
}
});
}else{
alert("用户名不能为空!")
return false;
}
})
</script>
</body>
</html>
后台是一个servlet
package demoservlet;
import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
/**
* Created by 3127 on 2017/4/23.
*/
public class Demo2 extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req,resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setCharacterEncoding("utf-8");
String username=req.getParameter("username");
String availiable="0";
String info="该用户名可以使用!";
Map<String,String> map=new HashMap();
if(username!=null&&!username.equals("")){
if(username.equals("3127")){
availiable="1";
info="对不起,该用户名已被使用!";
}
}
map.put("availiable",availiable);
map.put("info",info);
PrintWriter writer = resp.getWriter();
writer.print(JSON.toJSON(map));
writer.flush();
writer.close();
}
}
<servlet>
<servlet-name>demo2</servlet-name>
<servlet-class>demoservlet.Demo2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>demo2</servlet-name>
<url-pattern>/demo2</url-pattern>
</servlet-mapping>