Ajax和Json的使用

ajax

引入 javascript

<script type="text/javascript">

</script>

Javascript的函数

在Javascript的编写范围内写入自己的代码

function 代表这是一个函数, f是函数名

    function f() {

    }

前端选择器

name:
<input type="text" id="name" onblur="a2()">
<span id="nameinfo"></span>
<br>
pwd:
<input type="text" id="pwd" onblur="a1()">
<span id="pwdinfo">

前端界面如上

$("#pwdinfo").html(data) 可以把data的值添加到这id为pwdinfo的这个标签中

$("#pwdinfo").css("color","red") 修改id为pwdinfo的这个标签的颜色

$("#pwd").val()  id 选择器，可以得到这个标签的值

可以通过$("# id")来得到这个id的html标签,并且可以通过后面的方法来对他进行一些操作,

编写一个ajax

函数的模板:

    function f() {
		$.ajax({
                url: "/hi2",
                // type:post,
                data: {"name": $("#name").val()},
                success: function (data, status) {
                    alert(data);
                    alert(status);
                }
            })
    }

ajax中的参数解析：
        url：待提交给后台的地址
        type: 采用的提交方式
        data：所带的参数（通过json格式）
        success: function(data, status) ajax请求成功后的回调函数：data是返回的数据，status是返会的状态（200、404）

Json

Json和javascript

json主要用来和前台交互数据的,它的基本格式语法:

• 对象表示为键值对，数据由逗号分隔

• 花括号保存对象

• 方括号保存数组

  常见形式:

  {"name": "QinJiang"}
  {"age": "3"}
  {"sex": "男"}
  

  JSON 是 JavaScript 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

JSON 和 JavaScript 对象互转

• 要实现从JSON字符串转换为JavaScript 对象，使用 JSON.parse() 方法：

  var obj = JSON.parse('{"a": "Hello", "b": "World"}'); 
  //结果是 {a: 'Hello', b: 'World'}
  

• 要实现从JavaScript 对象转换为JSON字符串，使用 JSON.stringify() 方法：

  var json = JSON.stringify({a: 'Hello', b: 'World'});
  //结果是 '{"a": "Hello", "b": "World"}'
  

加入依赖( Jackson )

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.8</version>
        </dependency>

使用方法

获得ObjectMapper对象,然后调用对象的API即可,可以在RequestMapping中添加参数来解决乱码问题

    // faskjson,jackson 来处理返回json
    @RequestMapping(value = "/json2", produces = "application/json; charset=utf-8")
    @ResponseBody
    public String json2() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        User user = new User("asfd", "asdf", "asdf");
        String s = mapper.writeValueAsString(user);
        return s;
    }

格式化时间

    @ResponseBody
    @RequestMapping("/time")
    public String time() throws JsonProcessingException {
        Date date = new Date();
        ObjectMapper mapper = new ObjectMapper();
        // 关闭时间戳
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
        // 格式化时间
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        mapper.setDateFormat(simpleDateFormat);
        return mapper.writeValueAsString(date);
    }

fastjson

fastjson是阿里开发的一款专门用于Java开发的包，可以方便的实现json对象与JavaBean对象的转换，实现JavaBean对象与json字符串的转换，实现json对象与json字符串的转换。实现json的转换方法很多，最后的实现结果都是一样的。

<dependency>
   <groupId>com.alibaba</groupId>
   <artifactId>fastjson</artifactId>
   <version>1.2.60</version>
</dependency>

fastjson 三个主要的类：

• 【JSONObject 代表 json 对象 】
  • JSONObject实现了Map接口, 猜想 JSONObject底层操作是由Map实现的。
  • JSONObject对应json对象，通过各种形式的get()方法可以获取json对象中的数据，也可利用诸如size()，isEmpty()等方法获取"键：值"对的个数和判断是否为空。其本质是通过实现Map接口并调用接口中的方法完成的。
• 【JSONArray 代表 json 对象数组】
  • 内部是有List接口中的方法来完成操作的。
• 【JSON 代表 JSONObject和JSONArray的转化】
  • JSON类源码分析与使用
  • 仔细观察这些方法，主要是实现json对象，json对象数组，javabean对象，json字符串之间的相互转化。

参考：

https://blog.kuangstudy.com/index.php/archives/480/

https://blog.kuangstudy.com/index.php/archives/481/