快捷導(dǎo)航

Springmvc處理ajax請(qǐng)求并返回json數(shù)據(jù)

更新時(shí)間：2020年07月01日 15:08:19 作者：等你的夏天

這篇文章主要介紹了Springmvc處理ajax請(qǐng)求并返回json數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

①在springmvc方法上添加@ResponseBody注解，springmvc會(huì)將數(shù)據(jù)轉(zhuǎn)換成json并返回；

@ResponseBody //指定返回json數(shù)據(jù)，不跳轉(zhuǎn)頁(yè)面
  @RequestMapping("/list")
  public List<User> list(User user){
    System.out.println("獲取到異步請(qǐng)求數(shù)據(jù)："+user);
    //todo 根據(jù)條件做數(shù)據(jù)庫(kù)查詢，返回結(jié)果集合
    ArrayList<User> users=new ArrayList<>();
    users.add(new User(1,"james",18,"男"));
    users.add(new User(2,"姚明",40,"男"));
    users.add(new User(3,"科比",46,"男"));
    return users;
  }

list.jsp頁(yè)面中代碼為：

<body>
  <input type="button" id="btn" value="異步加載數(shù)據(jù)"/>
  <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
  <script>
    $(function ($) {
      $("#btn").click(function () {
        $.ajax({
          url:"${pageContext.request.contextPath}/list",
          type:"post",
          data:{"name":"james","age":18},
          dataType:"json",
          success:function (result) {
            alert("請(qǐng)求成功！")
            console.log(result)
          }
        })
      })
    })
  </script>
</body>

②如果contentType=”application/json”時(shí)，在方法的參數(shù)前添加@RequestBody注解，獲取傳遞的json字符串，并封裝到對(duì)象中；

@ResponseBody //指定返回json數(shù)據(jù)，不跳轉(zhuǎn)頁(yè)面
  @RequestMapping("/list")
  public List<User> list(@RequestBody(required=false) User user){
    System.out.println("獲取到異步請(qǐng)求數(shù)據(jù)："+user);
    //todo 根據(jù)條件做數(shù)據(jù)庫(kù)查詢，返回結(jié)果集合
    ArrayList<User> users=new ArrayList<>();
    users.add(new User(1,"james",18,"男"));
    users.add(new User(2,"姚明",40,"男"));
    users.add(new User(3,"科比",46,"男"));
    return users;
  }

list.jsp頁(yè)面中代碼為：

<body>
  <input type="button" id="btn" value="異步加載數(shù)據(jù)"/>
  <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
  <script>
    $(function ($) {
      $("#btn").click(function () {
        var jsonObj={"name":"james","age":18};
        $.ajax({
          url:"${pageContext.request.contextPath}/list",
          type:"post",
          data:JSON.stringify(jsonObj),//json字符串 將json對(duì)象轉(zhuǎn)化為字符串
          dataType:"json",
          contentType:"application/json",//指定以json方式傳輸數(shù)據(jù)
          success:function (result) {
            alert("請(qǐng)求成功！")
            console.log(result)
          }
        })
      })
    })
  </script>
</body>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: