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

　　

。。。未完待續