一个完整的ajax简单案例

3127

墨衍会员 · AI 创作全网分发码龄10年

关注

原创最新推荐文章于 2023-05-22 23:12:02 发布 2.8w 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

之前在网上找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();
    }
}

web.xml配置

<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>