JSON 与 Ajax初级练习

在使用之前，先了解一下什么是AJAX与JSON

AJAX 被称为是异步 JavaScript 和 XML，是一组用于客户端的相互关联的 Web 开发技术。作用是不影响现有页面显示，从后台获取数据，通俗来说就是不用刷新页面就能拿到数据了

1、导入pom依赖:

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

2、在前端页面导入需要的静态资源 js

<script src="${APP_PATH}/bootstrap/js/jquery-2.1.0.min.js"></script>

3、书写后台接收json请求的代码：

 @RequestMapping("/ajax")
    @ResponseBody
    public Json testAjax(String map){
        System.out.println(map);
        return Json.setJson(map);
    }

注：@RestController 声明的类，所有的方法返回都为 json 字符串形式

package com.wanshi.spring.pojo;

import lombok.Data;

import java.util.HashMap;
import java.util.Map;

@Data
public class Json {//自定义返回类包括状态code、报错信息message，返回的数据info
    private String code;
    private String message;
    private Map<String,Object> info;

    public static Json setJson(String map){ //自定义方法，目的是将前端返回的字符串转换成一个map对象集合

        Json json=new Json();
        Map<String, Object> _map = new HashMap<>();
        String[] info = map.split("&");

        int i=0;
        try {
            for (String name:info) {
                _map.put(name.substring(0,name.indexOf("=")),name.substring(name.indexOf("=")+1));
            }
            json.setInfo(_map);
        }catch (Exception e){
            json.setCode("10");
            json.setMessage(e.getMessage());
            i=1;
        }
        if(i==0){
            json.setCode("0");
        }
        return json;
    }

}

4、前端请求方法：

            function a1(){
                alert(1)
                var value = $("#select_from").serialize(); //将表单数据封装为一个字符串
                value=decodeURIComponent(value,true); //解决中文乱码
                 $.ajax({ //ajax请求
                        url:"${APP_PATH}/web/ajax", //请求的地址
                        data:{ "map":value }, //要携带的数据
                        success:function (data){ //接收到的数据放入 data 中
                           console.log(data)
                        }
                 })
            }

form表单:

<form id="select_from">
    <input  value="" type="text" id="account" name="account"/> <span id="_account"></span>
    <input value="" type="password" id="password" name="password"/> <span id="_password"></span>
    <input type="button" value="提交" onclick="a1()"/>
    <span id="Info"></span>
</form>

总结：当点击 ‘提交‘ 按钮后，会执行函数a1，发送ajax请求，请求到后台后，拿到前端发送的json字符串，解析成一个对象，然后以json字符串方式返回这个对象，前端 data 就可以拿到数据，然后可以动态渲染要显示的数据页了