后台controller层和前台ajax互传json数据的一个demo

什么是JSON

JSON特点：

• JSON：JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是存储和交换文本信息的语法。类似 XML
• JSON 轻量级的数据交换格式，比xml更轻巧
• JSON 独立于语言和平台
• JSON 可通过 JavaScript 进行解析
• JSON 数据可使用 AJAX 进行传输

JSON注意点：

• JSON格式的对象属性名必须有双引号，如果值是字符串，也必须是双引号
  
• 注意JSON是一种严格的js对象的格式，比如JSON格式的数组、字符串、JS对象
  
• 后缀名是.json
• MIME 类型是 “application/json”

前台ajax

$(function () {
        $("#name,#email").blur(function () {
            var name = $("#name").val()
            var email = $("#email").val()
            /*正则表达式：
             * 字母或数字开始可以加下划线或者"-",然后是@,然后是任意字母或字符串,然后是.,然后是2到4个字母
             * */
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            $("#namep,#emailp").remove()
            if (email !== "" && !reg.test(email)) {
                $("#email").after('<p id="emailp">邮箱格式输入错误</p>')
            }
            if (name !== "" || email !== "") {
                $.ajax({
                    url: "/user/checkDuplicateregist",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "name": name,
                        "email": email
                    },
                    success: function (data) {
                        for (var i in data) {
                            var result = data[i]
                            if (name !== "" && i === "name") {
                                // ZENG.msgbox.show("服务器繁忙，请稍后再试。", i, 3000);
                                $("#name").after('<p id="namep">' + result + '</p>')
                            }
                            if (email !== "" && i === "email") {
                                $("#email").after('<p id="emailp">' + result + '</p>')
                            }
                            if (name !== "" && i === "result") {
                                $("#name").after('<p id="namep">' + result + '</p>')
                            }
                            if (email !== "" && reg.test(email) && i === "result") {
                                $("#email").after('<p id="emailp">' + result + '</p>')
                            }
                        }
                    },
                    error: function (data) {
                        alert(data);
                    }
                });
            }
        })
    })

后台controller

    @RequestMapping(value = "/checkDuplicateregist", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, String> checkDuplicateregist(
            @RequestParam(value = "name", defaultValue = "") String name,
            @RequestParam(value = "email", defaultValue = "") String email) {
        Map<String, String> map = new HashMap<>();
        User user = ui.checkDuplicateregist(name, email);
        // 用户名或者邮箱已经存在，向前台反映
        if (user != null) {
            if (user.getName().equals(name)) {
                map.put("name", "用户名重复,不可以注册");
            }
            if (user.getEmail().equals(email)) {
                map.put("email", "邮箱重复,不可以注册");
            }
        } else {
            map.put("result", "可以注册");
        }
        return map;
    }

注意事项

最常见的就是406
它是类型转换错误，指前台和后台交互时互传的数据类型不一致导致的：
前台只需要设置：dataType: "json"就好了，它会将请求头设置成application/json，所以错误又以后台响应头不为json居多：

pom文件配置

jackson是另外一种把java对象转化为json对象的jar包，要使用此种方式需要引入以下三个jar包：jackson-annotations-2.5.0-rc4.jar、jackson-core-2.5.0-rc4.jar、jackson-databind-2.5.0-rc4.jar。

        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.5.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.5.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.5.0</version>
        </dependency>

效果