javaweb 之用Ajax实现用户注册功能

一.客户端

三种方式提交

get post json

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2018/8/5
  Time: 23:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>regaxios</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
   <form name="form1" method="post">
       用户名:<input type="text" name="username" id="username" v-model="username"/>
       密码:<input type="password" name="pwd" id="pwd" v-model="pwd"/>
       <button type="button" v-on:click="doget()">提交</button>
   </form>
</div>
</body>

<script>

    var vue=new Vue({
        el:'#app',
        data:{
            username:'',
            pwd:'',
            users:{},
            inited:true
        },

        methods:{
            //get方式提交
            doget:function() {
                var data = {};
                data.username = this.username;
                data.pwd = this.pwd;

                var url = 'doreg.jsp?username=' + data.username + '&pwd=' + data.pwd;
                //回调函数
                axios.get(url).then(function (result) {
                    if (vue.inited) {
                        vue.users = result.data.users;
                        vue.inited = false;
                        return;
                    }

                    if (result.data.msg.indexOf('用户名已存在') >= 0) {
                        alert('用户名已存在,注册失败');
                    } else {
                        alert('注册成功');
                        vue.users = result.data.users;
                        vue.inited = false;
                    }
                });
            },

            //post方式提交
                dopost:function() {
                    var url='doreg.jsp';
                    var param=new URLSearchParams();
                    param.append("username",this.username);
                    param.append("pwd",this.pwd);
                    param.append("users",this.users);

                    axios.post(url,param).then(function (result) {
                        if(vue.inited){
                            vue.users=result.data.users;
                            vue.inited=false;
                            return;
                        }

                        if(result.data.msg.indexOf('用户名已存在')>=0){
                            alert('用户名已存在,注册失败');
                        }else{
                            alert('注册成功');
                            vue.users=result.data.users;
                            vue.inited=false;
                        }
                    });
                },


            //json方式提交
            dojson:function () {
                var data={};
                data.username=this.username;
                data.pwd=this.pwd;
                data.users=this.users;
                var url='doreg.jsp';
                axios.post(url,data).then(function (result) {
                    if(vue.inited){
                        vue.users=result.data.users;
                        vue.inited=false;
                        return;
                    }

                    if(result.data.msg.indexOf('用户名已存在')>=0){
                        alert('用户名已存在,注册失败');
                    }else{
                        alert('注册成功');
                        vue.users=result.data.users;
                        vue.inited=false;
                    }
                });
            }
        },

        //初始化的函数
        mounted: function () {
            console.log('init');
            this.doget();
        }
    });
</script>
</html>

二.服务器端

<%@ page import="java.io.InputStream" %>
<%@ page import="org.apache.commons.io.IOUtils" %>
<%@ page import="com.alibaba.fastjson.JSONObject" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.alibaba.fastjson.serializer.SerializerFeature" %><%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2018/8/6
  Time: 0:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String username=request.getParameter("username");
String pwd=request.getParameter("pwd");

if(username==null){
    //JSON以流的方式获取数据
    InputStream in=request.getInputStream();
    //转换为字符串
    String jsonstr= IOUtils.toString(in,"utf-8");
    //将字符串转换为json对象
    JSONObject obj= JSON.parseObject(jsonstr);
    //获取数据
    username=obj.getString("username");
    pwd=obj.getString("pwd");
}

//获取users对象
Map users=(Map)application.getAttribute("users");
//创建jsonObject对象
JSONObject jsonObject=new JSONObject();

//如果users为空
if(users==null){
    //创建一个集合用来存储用户信息
    users=new HashMap();
    //将用户信息存入
    users.put(username,pwd);
    application.setAttribute("users",users);
    //json存入数据,作为反馈信息
    jsonObject.put("msg","用户不存在");
}else {
    if(users.containsKey(username)){
        jsonObject.put("msg","用户名已存在");
    }else{
        jsonObject.put("msg","用户名不存在");
        users.put(username,pwd);
    }
}

    jsonObject.put("users",users);
    out.println(JSON.toJSONString(jsonObject, SerializerFeature.WriteSlashAsSpecial));
%>

javaweb 之 用Ajax实现用户注册功能

猜你喜欢

javaweb 之用Ajax实现用户注册功能