一个完整的ajax简单案例

来源：互联网发布：jsp中写java方法编辑：程序博客网时间：2024/06/09 14:15

之前在网上找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>

0 0