前台擷取json未定義問題之兩種常用解決辦法

來自部落格園的一位朋友解答:

為什麼要 eval這裡要添加 “("("+data+")");//”呢？

原因在于：eval本身的問題。 由于json是以”{}”的方式來開始以及結束的，在JS中，它會被

當成一個語句塊來處理，是以必須強制性的将它轉換成一種表達式。

加上圓括号的目的是迫使eval函數在處理JavaScript代碼的時候強制将括号内的表達式

（expression）轉化為對象，而不是作為語句（statement）來執行。舉一個例子，例如對

象字面量{}，如若不加外層的括号，那麼eval會将大括号識别為JavaScript代碼塊的開始和

結束标記，那麼{}将會被認為是執行了一句空語句。是以下面兩個執行結果是不同的：

alert(eval("{}"); // return undefined

alert(eval("({})");// return object[Object]

對于這種寫法，在JS中，可以到處看到。

如: (function()) {}();  做閉包操作時等。

注意：該例子使用的架構是spring+springmvc+mybatis plus

mybatis plus 是現有mybatis的增強版

官網為:http://mp.baomidou.com

這裡有更為詳細介紹

代碼生成器可參考:人人開源 http://www.renren.io/

上述開源架構對于提高開發效率有很大的幫助

登入驗證舉例(成功例子):

/**
 * 登入js
 */

$(function(){

    $("#btn_login").click(function(){
        var mobile = $("#mobile").val();
        var password = $("#pwd").val();
        alert(mobile+"||"+password)
        $.ajax({
            url:"/LMS/user/Login",
            type:"POST",
            data : {"mobile":mobile,"password":password},
            dataType : 'json',
            success:function(data){
                var json = eval("("+data+")");
             if(json.returnCode=="111111"){
                 alert(json.returnMsg);
             }else if(json.returnCode=="222222"){
                 alert(json.returnMsg);
             }else if(json.returnCode=="000000"){
                 alert(json.returnMsg);
             }else{
                 
                 alert("有異常，請和管理者聯系");
             }
    
            },error:function(){
                alert("error");
            }
        });
    
    });
});      

@RestController
@RequestMapping("/user")
public class UserController {
    
    private static Logger logger = Logger.getLogger(UserController.class);
    
    @Autowired
    private UserService userService;
    
    @Autowired
    private UserAuthsService userAuthsService;
    
    @RequestMapping(value="/Login",method=RequestMethod.POST,produces="application/json;charset-utf8")
    @ResponseBody
    public String Login(String mobile,String password) {
       logger.info("使用者手機号:"+mobile);
       logger.info("使用者密碼:"+password);       
      
       EntityWrapper<UserEntity> wrapper = new EntityWrapper<UserEntity>();
       wrapper.eq("mobile", mobile);
       UserEntity user = userService.selectOne(wrapper);       
       
       EntityWrapper<UserAuthsEntity> wrapper2 = new EntityWrapper<UserAuthsEntity>();
       wrapper2.eq("identifier", user.getMobile());
       UserAuthsEntity userAuth = userAuthsService.selectOne(wrapper2);
       
       logger.info("userEntity:"+user.getMobile());
       logger.info("userAuth:"+userAuth.getCredential());
       
       Map<String,Object> map = new HashMap<String,Object>();
       if(!userAuth.getIdentifier().equals(mobile)) {
           map.put("returnCode", "111111");
           map.put("returnMsg","手機号有誤");
       }else if(!userAuth.getCredential().equals(password)) {
           map.put("returnCode", "222222");
           map.put("returnMsg","密碼錯誤");
       }else {
           map.put("returnCode", "000000");
           map.put("returnMsg","通過驗證");
           map.put("user", user);
           map.put("userAuth", userAuth);
       }       
       return JSON.toJSONString(map);
    }
}      

失敗例子:

/**
 * 登入js
 */

$(function(){

    $("#btn_login").click(function(){
        var mobile = $("#mobile").val();
        var password = $("#pwd").val();
        alert(mobile+"||"+password)
        $.ajax({
            url:"/LMS/user/Login",
            type:"POST",
            data : {"mobile":mobile,"password":password},
            dataType : 'json',
            success:function(data){
                
             if(data.returnCode=="111111"){
                 alert(data.returnMsg);
             }else if(data.returnCode=="222222"){
                 alert(data.returnMsg);
             }else if(data.returnCode=="000000"){
                 alert(data.returnMsg);
             }else{
                 
                 alert("有異常，請和管理者聯系");
             }
    
            },error:function(){
                alert("error");
            }
        });
    
    });
});      

兩個例子進行對比，前者可成功傳回json資料，而後者傳回未定義

而當你将data.returnMsg或data.returnCode後面的returnMsg,returnCode去掉，直接alert(data) 是可以傳回資料的

傳回的資料直接是以json串(json字元串的形式{})，而并未将json進行格式化，是以直接取資料導緻未定義

将json格式化有兩種方法：

方式一:

一種是上述 var json = eval("("+data+")"); 稱之為用eval解析

方式二:

var json = "{user:'user'}"

var obj = new Function("return"+json)//轉換後的json對象

alert(obj.name);

alert(obj.age);