使用json实现ajax请求servlet

JSON

json是JavaScript提供的一种数据交换格式

json对象和json串

json对象: 我们就是指js中的对象 {属性名:属性值, 属性名:属性值}

var person = {name:”狗娃”, age:18, sex:”男”, 
getName: function(){
    return this.name 
}};

在js中如何访问对象中的值 : 对象名.属性名

json串: 指的就是字符串, 花括号中的key都必须用""包起来
var person = '{"name": "狗娃", "age": 18, "sex": "女"}';
而在servlet如果使用ajax作为请求的话，请求参数不要是 json串 ,
可以为json对象, 也可以为key=value字符串, 推荐是key=value字符串

如何将json串转换为json对象:

image.png

       // 定义json串
      //        var personStr = "{\"name\": \"小李\", \"age\": 18}";
        var personStr = '{"name": "小李", "age": 18, "sex": "男"}';
//        alert(personStr);

        // 如何将一个json串转换成一个json对象, 使用eval("(" + json串 + ")");
        personStr = window.eval("(" + personStr + ")");

        alert(personStr); // [object Object]
        alert(personStr.name);

如何将json对象转换成json串

JSON.stringify(json对象);

image.png

// 定义一个json对象
var person = {username: "小李", password: "123"};
alert(person);
// 将json对象转换成json串
person = JSON.stringify(person);
alert(person);

通过$.ajax()请求servlet

$(function () {
        // 定义一个json对象
        var person = {username: "小李", password: "123"};

//        alert(person);

        // 使用jquery提供的ajax方法
        $.ajax({
            /*
                type: 请求的类型
                dataType: 从服务端接收的数据类型 html, xml, text, json
                url: 请求路径
                data: 请求参数
                success: 回调函数 msg: 从服务端接收过来的内容
             */
            type: "post",
            dataType: "json",
            url: "${pageContext.request.contextPath}/JsonServlet",
            data: person,

            success: function (msg) {
                alert(msg);
                alert(msg.username + "--" + msg.password);
            }
        });


    });

servlet中的代码:

image.png

@WebServlet(name = "JsonServlet", value = "/JsonServlet")
public class JsonServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // ajax如果传递的是json对象, 那么会自动将该对象
        // 转换成key=value&key=value... 字符串形式
        request.setCharacterEncoding("utf-8");
        System.out.println(request.getCharacterEncoding());

        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username + "---" + password);

        // 向客户端响应一个json串
        String jsonStr = "{\"username\":\"learning\", \"password\": \"123\"}";

        response.getWriter().print(jsonStr);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
}

json-lib：帮助我们将javabean转成json串

导入jar包

image.png

在json-lib中两个核心的类 : 都可以将avabean转换成json串

JSONObject

image.png

      response.setContentType("text/html;charset=utf-8");
        /*
            JSONObject: 实现了Map接口, 本质是一个Map集合
            将JSONObject作为map集合来使用
            fromObject(): 可以将JSONObject对象转换成json串
         */
        JSONObject jb = new JSONObject();
        // 存储键值对
        jb.put("name", "小李");
        jb.put("age", 18);
        jb.put("sex", "男");
        System.out.println(JSONObject.fromObject(jb));
        // 向客户端响应一个json串
        response.getWriter().print(JSONObject.fromObject(jb));

JSONArray

        response.setContentType("text/html;charset=utf-8");

        /*
             JSONArray的使用: 它是一个List集合
         */
        JSONArray ja = new JSONArray();

        Person person1 = new Person("小李", 19, "男");
        Person person2 = new Person("小阳", 15, "男");
        ja.add(person1);
        ja.add(person2);

        /*
            已知有JavaBean对象, 将JavaBean对象转换成json串
         */
        // 将ja转换成JSON串
        System.out.println(JSONArray.fromObject(ja));
        response.getWriter().print(JSONArray.fromObject(ja));

完整代码地址

https://github.com/menglanyingfei/front-end-Learning/tree/master/ajax%26json/jsonDemo