jquery--使用ajax提交json实现简单注册

最新推荐文章于 2024-05-09 19:53:32 发布

原创最新推荐文章于 2024-05-09 19:53:32 发布 · 1.2k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #jquery #json

本文介绍了一个简单的用户注册流程实现方案，包括前后端交互的具体步骤。从前端表单填写到后端逻辑处理，再到最终的反馈展示，通过ajax实现异步验证用户名是否可用。

简单注册的主要步骤

后台获取请求数据
对数据进行逻辑处理
将数据结果转变成json格式，但切记不要转发或者重定向
页面编写表单
导入jQuery，使用ajax，选择提交数据的，数据格式，数据方式，
ajax提交成功执行方法，提交失败执行方法

package com.qst.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.qst.bean.Result;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/queryServlet")
public class queryServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username=request.getParameter("username");

        Result result=new Result();

        if("jack".equals(username)){
            result.setCode(0);
            result.setMsg("此用户名已被注册");
        }else{
            result.setCode(1);
            result.setMsg("恭喜，该用户名可以注册");
        }
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(new ObjectMapper().writeValueAsString(result));


    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入js文件 -->
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        <!-- 页面加载完成后再执行-->
        $(function (){
            <!-- id为name的元素绑定blur方法，blur方法 失去焦点时执行-->
            $("#name").on("blur",function(){
                $.ajax({
                    url:"queryServlet",//ajax 提交的地址
                    asny:true,//是否异步
                    data:"username="+$("#name").val(),//要提交的数据
                    type:"post",//提交的方式 ，post或get
                    dataType:"json",//提交的数据类型
                    success:function(data){//提交成功执行方法
                        if(data.code){
                            //设置msg的文本值
                            $("#msg").text(data.msg)
                            //设置css属性
                            $("#msg").css("color","green")
                        }else {
                            $("#msg").text(data.msg)

                            $("#msg").css("color", "red")
                        }
                    },
                    error:function( ){//提交失败后执行
                        alert("服务器发生错误")
                    }
                });
            })
        })
    </script>
</head>
<body>
    <form action="queryServlet" method="post">
       username: <input type="text" name="name" id="name"/>
        <br/>
        <div  id="msg" style="color: green;"></div>
       password: <input type="password" id="password" name="password"/>
        <br/>
        <input type="button" value="注册">
    </form>

</body>
</html>

效果

在这里插入图片描述