一文读懂JavaWeb前后端数据交互

// json字符串转json对象,调用parse方法：
//符合JSON语法的对象，所以是JSON字符串
var person='{"name":"zhangsan","sex":"男","age":"24"}';
var personObject = JSON.parse(person);
alert(personObject.name);//zhangsan

// json对象转为json字符串，调用stringify方法：
//符合JSON语法的对象，所以是JSON对象
var person={"name":"zhangsan","sex":"男","age":"24"};
var personString = JSON.stringify(person);
alert(personString);

// json对象转json字符串，以JSONObject为中介
Student stu=new Student();
stu.setName("JSON");
stu.setAge("23");
stu.setAddress("北京市西城区");
JSONObject json = JSONObject.fromObject(stu);
String strJson=json.toString();
System.out.println("strJson:"+strJson); // trJson:{"address":"北京市西城区","age":"23","name":"JSON"}


// json字符串转json对象
String objectStr="{\"name\":\"JSON\",\"age\":\"24\",\"address\":\"北京市西城区\"}";
JSONObject jsonObject=JSONObject.fromObject(objectStr);
Student stu=(Student)JSONObject.toBean(jsonObject, Student.class);
System.out.println("stu:"+stu); //stu:Student [name=JSON, age=24, address=北京市西城区]

<form action="${pageContext.request.contextPath}/login.action" method="post">
   用户名<input type="text" name="username"><br>
   密码<input type="password" name="password"><br>
</form>

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
  <!--Json对象-->
    var user = {
      "username": "hahah",
      "password": "123456"
    };

    $.ajax({
      url:"/testJson",
      type: "GET",
      async: true,
      data: user,//Json对象
      dataType: 'json',
      success: function (data) {

      }
    });
  </script>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

  <script>
    var user = {
      "username": "hahah",
      "password": "123456"
    };

    $.ajax({
      url:"/testJson3",
      type: "POST",
      async: true,
      contentType: "application/json;charset=UTF-8", //使用 application/json;charset=UTF-8
      data: JSON.stringify(user), //将JSON对象转换为JSON字符串
      dataType: 'json',
      success: function (data) {

      }
    });
  </script>

$.ajax({
        url:'/heap',	//这是后端接口的url
        method:'get',
        success:function (res) {
            //res便是的数据便是后端拿到的数据
            //这里需要注意：res为局部变量，
            //所以需要在方法外定义一个变量把res赋值给他，才能在方法之外使用。
        },
    })

// http://localhost:port/form?phone=roger&password=123456

@RequestMapping("form")
@ResponseBody
public User form(@RequestParam("phone")String phone,@RequestParam("password")String password){
    return new User(phone,password);
}

// http://localhost:port/form

@RequestMapping("form")
@ResponseBody
public User form(@RequestParam("phone")String phone,@RequestParam("password")String password){
    return new User(phone,password);
}

// http://localhost:port/form1

@RequestMapping("form1")
@ResponseBody
public User form1(@RequestBody MultiValueMap<String,String> user){
    String phone = user.getFirst("phone");
    String password = user.getFirst("password");
    return new User(phone,password);
}

@Controller
@RequestMapping(value = "saveUser", method=RequestMethod.POST ) 
@ResponseBody  
public void saveUser(@RequestBody User user) { 
    userService.batchSave(user); 
}