json模拟数据交互

  在模拟前端与后台进行数据交互之前需先进行环境配置：

1. 使用tomcat之前需先安装java环境jdk，jdk下载推荐：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html；jdk安装及测试是否安装成功：http://jingyan.baidu.com/article/3c343ff70bc6ea0d377963df.html。

 

2. tomcat下载安装及配置推荐：http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html。我这里选择XAMPP（XAMPP是一个把Apache网页服务器与PHP、Perl及MySQL集合在一起的安装包，允许用户可以在自己的电脑上轻易的建立网页服务器）自带的tomcat，直接点击start启动tomcat服务器。localhost:8080验证服务器是否启动成功。

 

3. 把项目放到tomcat下的webApps文件夹下。项目中建立json文件，存放数据。如实现判断注册页面内的信息与预先存入数据的json文件内信息相比较，判断该信息之前是否存入过，存在过则需重新输入其他信息进行注册，如果没有存在过是否可以把刚注册的信息保存到json文件中呢？如登陆页面，输入登陆信息后，首先判断该账户信息是否存在于预先存储的json文件中，不存在提示需先注册，若账户信息存在，则判断对应密码是否正确，正确则提示登陆成功，否则提示密码错误？（这里不打开服务器也可以实现）

 部分代码：

//注册验证
if (booluser && boolpwd && boolpwd1 && booltel && boolemail) {
                $.ajax({
                    type: "get",
                    url: "js/data.json",
                    async: true,
                    data: {
                        user: $('.register input')[0].value,
                        psd: $('.register input')[1].value,
                        phone: $('.register input')[3].value,
                        email: $('.register input')[4].value
                    },
                    success: function (data) {
                        if(checkAccount(data)){
                            alert("已存在，请重新输入");
                        }else{
                            alert("注册成功");
                            $(".register").hide();

                         /*   Util.StorageSetter('loginName', $('.register input')[0].value);
                            Util.StorageSetter('loginPsd', $('.register input')[1].value);
                            Util.StorageSetter('loginPhone', $('.register input')[3].value);
                            Util.StorageSetter('loginEmail', $('.register input')[4].value);*/
                        }
                            $('.register input')[0].value = $('.register input')[0].defaultValue;
                            $('.register input')[1].value = $('.register input')[1].defaultValue;
                            $('.register input')[2].value = $('.register input')[2].defaultValue;
                            $('.register input')[3].value = $('.register input')[3].defaultValue;
                            $('.register input')[4].value = $('.register input')[4].defaultValue;

                    }
                })
            }


//登录验证
 if (booluser && boolpwd ) {
                $.ajax({
                    type: "get",
                    url: "js/data.json",
                    async: true,
                    data: {
                        user: $('.register input')[0].value,
                        psd: $('.register input')[1].value,
                    },
                    success: function (data) {
                        //console.log(data);
                        if(!checkLoginAccount(data)){
                            alert("账号不存在，请先注册！");
                            $(".register").show();
                            $(".login").hide();
                        }else if(checkAP(data)){
                            alert("登录成功！")
                            $(".login").hide();
                        }else{     
alert("密码错误，请重新输入！")   
$('.login input')[1].value = "请重新输入"; 
 }

} }) }

 //注册时检验账户是否存在
function checkAccount(data){ 
  var objJson = eval(data); 
  //var objJson = JSON.parse(data);
  for(var i = 0;i < objJson.length;i++){ 
    if($('.register input')[0].value == objJson[i].account ||$('.register input')[3].value ==objJson[i].phone ||$('.register input')[4].value ==objJson[i].email){ 
       return true;
     } 
  } 
 } 

//登录时检验账户是否存在
    function checkLoginAccount(data){
        var objJson = eval(data);
        //var objJson = JSON.parse(data);
        for(var i = 0;i < objJson.length;i++){
            if($('.login input')[0].value == objJson[i].account){
                //alert("已存在，请重新输入")
                return true;
            }
        }
    }

//登录时检验账户密码是否正确
    function checkAP(data){
        var objJson = eval(data);
        //var objJson = JSON.parse(data);
        for(var i = 0;i < objJson.length;i++){
            if($('.login input')[0].value == objJson[i].account && $('.login input')[1].value ==objJson[i].psd){
                return true;
            }
        }
    }

　　

。。。未完待续

转载于:https://www.cnblogs.com/haimengqingyuan/p/7301439.html