json和ajax使用

最新推荐文章于 2023-04-28 10:49:05 发布

爱码～

最新推荐文章于 2023-04-28 10:49:05 发布

阅读量301

点赞数 1

分类专栏：苦练基本功前端文章标签： ajax json java

本文链接：https://blog.csdn.net/weixin_47120348/article/details/120388575

版权

苦练基本功同时被 2 个专栏收录

173 篇文章 1 订阅

订阅专栏

前端

19 篇文章 1 订阅

订阅专栏

ajax使用
作用异步请求，局部刷新，实现数据交互，本质是XMLHttpRequest对象(浏览器接口对象)，我写主要是jQuery封装好的ajax方法使用，
json
是一种基于字符串的数据交换格式，json是js数据类型的子集，
json格式特征
{} 大括号:表示json字符串对象，
：冒号：属性和值用冒号分隔，
属性与属性之间用逗号分隔，
[] 中括号表示数组，
示例：{“userid”:“1”,“username”:“admin”,“sex”,“boy”} json对象
[{“userid”:“1”,“username”:“admin”},{“userid”:“2”,“username”:“admin”}] 数组对象
jackson的使用
jdk没有内置操作json数据的api,因此处理json数据要借助第三方类库，
springmvc中默认使用jackson简介，
如何通过json格式传递数据
1 将java对象转化成json对象
2 修改响应类型为application/json
3 在页面中通过js的json.parse()函数将json对象转化成js对象
后端实现ajax发送请求，处理返回的json数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
    <p id="1">1</p>
    <p id="2">2</p>
    <p id="3">3</p>
    <p id="4">4</p>
    <p id="5">5</p>
    <input type="button" value="发送" id="in">
</body>
<script>
    $("input").click(function(){
        alert("执行了");
        $.ajax({
            type:"get",
            url:"getJson",
            dataType:"json",//确定返回数据类型
            success:function(result){
                alert(result);
                console.log("成功"+result);
                console.log(result.username+result.usersex);
                $("#1").text(result.username);
                $("#2").text(result.usersex);
            },
            error:function(data){
                alert("失败了");
                console.log("hah");
            }
        })
    })
</script>
</html>

package com.example.ajaxdemo.springmvc;

import com.example.ajaxdemo.pojo.Users;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController // controller + Responsebody
public class AjaxDemo {
    @RequestMapping("/getJson")
    public String getJson() throws JsonProcessingException {
        Users users = new Users();
        users.setUsername("Rudy");
        users.setUsersex("boy");
        ObjectMapper objectMapper = new ObjectMapper();
        String s = objectMapper.writeValueAsString(users);
        System.out.println(s);
        return s;
    }
}

注意注解的使用
@RestController 方法无法返回jsp或是html页面，返回的只能是Return里面的内容
@Controller 视图解析器可以解析方法返回的值是jsp或是html页面，
@ResponseBody 将java对象转化成json格式的数据，方法的返回值直接写入response body中会直接返回json数据，
@RequestBody 作用在方法参数列表上，将前端传过来的json数据封装了javaBean对象，

ajax发送数据
想要提交表单必须要用post方式

@RestController
public class AjaxDemo {
    
    @RequestMapping("/sendjson")
    public String sendjson(String username,String usersex){//用实体类接收
        System.out.println(username+usersex);
        return "哈哈";
    }
}

<body>
<form>
    username<input id="a" name="username" type="text" /><br/>
    usersex <input id="b" name="usersex" type="text"/><br/>
    <input type="submit" id="c"/><br/>
</form>
</body>
<script>
    $("#c").click(function(){
        var name = $("#a").val()
        var sex = $("#b").val();
        alert("执行了"+name+sex);
          $.post({
              url:"/sendjson",
              data:{"username":name,"usersex":sex},
              success:function(data){
                  alert("成功了"+data);
              },
              error:function(){
                  alert("失败了");
              }
          })
    })
</script>

使用post方式提交json数据

<form>
    username<input id="a" name="username" type="text" /><br/>
    usersex <input id="b" name="usersex" type="text"/><br/>
    <input type="submit" id="c"/><br/>
</form>
</body>
<script>
    $("#c").click(function(){
        var name = $("#a").val()
        var sex = $("#b").val();
        alert("执行了"+name+sex);
          $.ajax({
              type:"post",
              url:"/sendjson",
              contentType: "application/json",
              dataType:"json",
              data:JSON.stringify({
                  name:name,
                  sex:sex,
              }),
              success:function(data){
               
              },
              error:function(){
                  alert("失败了");
              }
          })
    })
</script>

  @RequestMapping("/sendjson")
    public String sendjson(@RequestBody Users users) throws JsonProcessingException {//用实体类接收
        String username = users.getName();
        String usersex = users.getSex();
        return users;
    }

ajax接收json数据

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>

    <input type="button" id="c" value="发送"/><br/>
<p id="h"></p>
<p id="j"></p>
</body>
<script>
    $("#c").click(function(){
        $.getJSON("/getjson",function(result){//将响应结果的json数据自动转化成js对象
            alert(result);
            $("#h").text(result.name);
            $("#j").text(result.sex);
        })
    })
</script>

 @RequestMapping("/getjson")
    public String sendjson() throws JsonProcessingException {//用实体类接收
        Users users1 = new Users();
        users1.setName("admin");
        users1.setSex("boy");
        ObjectMapper objectMapper = new ObjectMapper();
        String s = objectMapper.writeValueAsString(users1);
        System.out.println(s);
        return s;
    }

爱码～

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
json和ajax使用

ajax使用作用异步请求，局部刷新，实现数据交互，本质是XMLHttpRequest对象(浏览器接口对象)，我写主要是jQuery封装好的ajax方法使用，json是一种基于字符串的数据交换格式，json是js数据类型的子集，json格式特征{} 大括号:表示json字符串对象，：冒号：属性和值用冒号分隔，属性与属性之间用逗号分隔，[] 中括号表示数组，示例：{“userid”:“1”,“username”:“admin”,“sex”,“boy”} json对象[{“use..
复制链接

扫一扫