AJAX和JSON

张利源

发布于：Apr 28, 2020

AJAX

概念：ASynchronous JavaScript And XML 异步的javascript和xml

实现方式:

1.原生的JS实现方式
2.JQuery实现方式

1.$.ajax()}
```
$.ajax({键值对});
```
2.$.get()

3.$.post()

JOSN

概念：JavaScript Object Notation JavaScript对象表示法

基本规则：

获取数据:

json对象.键名

json对象[“键名”]

数组对象[索引]

遍历JSON

1
2
3

for (var key in person){
    alert(key+":"+person[key])
}

JSON数据和Java对象的相互转换

1.JSON转为Java
    1.导入jar包
    2.创建jackson核心对象   ObjectMapper
    3.调用ObjectMapper的相关方法进行转换

代码

String json = "{\"name\":\"zhangsan\",\"age\":20,\"gender\":\"男\"}";

//创建ObjectMappper
ObjectMapper mapper = new ObjectMapper();
mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
//转换为Java的对象
Person person = mapper.readValue(json,Person.class);
System.out.println(person);

2.Java转为JSON

1.导入jar包
2.创建jackson核心对象   ObjectMapper
3.调用ObjectMapper的相关方法进行转换

代码

public void test1() throws Exception {
    Person p = new Person();
    p.setName("张三");
    p.setAge(23);
    p.setGendeer("男");


    //创建Jackson的核心对象  ObjectMapper
    ObjectMapper mapper = new ObjectMapper();
    //调用方法 转换
    String JSON = mapper.writeValueAsString(p);
    System.out.println(JSON);


    //wirterValue  将数据写入到D://a_test//a.txt中
    //mapper.writeValue(new File("D://a_test//a.txt"),p);


    //writeValue将数据关联到Writer中
    mapper.writeValue(new FileWriter("D://a_test//b.txt"),p);
}

注解：

1.@JsonIgnore:排除属性
2.@JsonFormat:属性值格式化

案例

校验用户是否存在

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="JS/jquery-3.4.1.min.js"></script>
    <script>
        //页面加载完成后 给文本框绑定离开焦点事件
        $(function () {
            $("#username").blur(function () {
                //获取username获取文本输入框的值
                var username = $(this).val();
                //发送ajax请求
                $.get("findUserServlet",{username:username},function (data) {
                    var span = $("#s_username")
                    if (data.userExsit){
                        //用户名存在
                        span.css("color","red")
                        span.html(data.msg)
                    }else {
                        //用户名不存在
                        span.css("color","green")
                        span.html(data.msg)
                    }
                },"json")
            })
        })
    </script>
</head>
<body>
<form>
    <input id="username" type="text" name="username" placeholder="请输入用户名">
    <span id="s_username"></span><br>
    <input type="text" name="password" placeholder="请输入密码"><br>
    <input type="button" value="注册">
</form>
</body>
</html>

Servlet代码

package cn.test.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/findUserServlet")
public class findUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        //设置响应数据为JSON
        response.setContentType("application/json;charset=utf-8");
        Map<String,Object> map = new HashMap<>();
        if ("Tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","用户名已经存在");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }

        //将map转为json，并且传递给客户端
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}