天天看點
傳回

ajax 與springmvc互動傳回資料

1.controller将資料封裝成json格式傳回頁面

@RequestMapping("/dataList") 
public void  datalist(CsoftCunstomerPage page,HttpServletResponse response) throws Exception{
    List<CsoftCunstomer> dataList = csoftCunstomerService.queryByList(page);
    //設定頁面資料
    Map<String,Object> jsonMap = new HashMap<String,Object>();
    jsonMap.put("total",page.getPager().getRowCount());
    jsonMap.put("rows", dataList);
     
    try {
        //設定頁面不緩存
        response.setContentType("application/json");
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out= null;
        out = response.getWriter();
        out.print(JSONUtil.toJSONString(jsonMap));
        out.flush();
        out.close();
    } catch (IOException e) {
        e.printStackTrace();
    }
     
}

2.ajax送出資料以json格式到controller中 

例一:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--<script type="text/javascript" src="../static/js/jquery-1.7.2.min.js"></script>-->
    <!--JS的位址可以寫成下面這樣，将來部署的時候，這些靜态檔案就可以單獨部署了，不依賴于背景路徑-->
    <script type="text/javascript" src="http://localhost:8080/sshdemo/static/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        ajaxRequest();
      });

      function ajaxRequest() {
        $.ajax({
          url: "http://localhost:8080/sshdemo/hello/ajax",
          type: "POST",
          dataType: "json",
          data: {
            "a": 1,
            "b": 2,
            "c": 3
          },
          async: false,
          success: function(data) {
            alert("success");
            $.each(data, function(index, element) {
              alert(element.a);
              alert(element.b);
              alert(element.c);
            });
          },
          error: function() {
            alert("error");
          }
        });
      }
    </script>
  </head>
  <body>
    <div>Hello World!</div>
  </body>
</html>

執行個體二

package com.xbs.ready.ssh.controller;

import com.alibaba.fastjson.JSON;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 *
 * @author xbs
 */
@Controller
@RequestMapping("hello")
public class HelloController {

  /**
   * ajax請求不需要傳回頁面，隻需要得到response中的資料即可，是以方法簽名為void即可
   * 
   * @param request
   * @param response 
   */
  @RequestMapping(value = "ajax", method = RequestMethod.POST)
  public void ajaxDatas(HttpServletRequest request, HttpServletResponse response) {
    String jsonResult = getJSONString(request);
    renderData(response, jsonResult);
  }

  private String getJSONString(HttpServletRequest request) {
    //故意構造一個數組，使傳回的資料為json數組，資料更複雜些
    List<Map<String, Object>> datas = new ArrayList<Map<String, Object>>(5);
    Map<String, Object> map1 = new HashMap<String, Object>(10);
    //可以獲得ajax請求中的參數
    map1.put("a", request.getParameter("a"));
    map1.put("b", request.getParameter("b"));
    map1.put("c", request.getParameter("c"));
    datas.add(map1);
    //故意構造一個數組，使傳回的資料為json數組，資料更複雜些
    Map<String, Object> map2 = new HashMap<String, Object>(10);
    map2.put("a", "11");
    map2.put("b", "22");
    map2.put("c", "33");
    datas.add(map2);
    String jsonResult = JSON.toJSONString(datas);
    return jsonResult;
  }

  /**
   * 通過PrintWriter将響應資料寫入response，ajax可以接受到這個資料
   * 
   * @param response
   * @param data 
   */
  private void renderData(HttpServletResponse response, String data) {
    PrintWriter printWriter = null;
    try {
      printWriter = response.getWriter();
      printWriter.print(data);
    } catch (IOException ex) {
      Logger.getLogger(HelloController.class.getName()).log(Level.SEVERE, null, ex);
    } finally {
      if (null != printWriter) {
        printWriter.flush();
        printWriter.close();
      }
    }
  }
}

例二:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>helloworld</title>
<script type="text/javascript" src="/spring_mvc/js/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $("#testButton").click(function(){
            var $a = $(this);
            $.ajax({
                url:"/spring_mvc/testAjax.do",
                type:'post',
                data:'name=admin&password=123456',
                dataType:'html',
                success:function(data,status){
                    if(status == "success"){
                        var objs = jQuery.parseJSON(data);
                        var str = "";
                        for(var i=0;i<objs.length;i++){
                            str = str + objs[i].activityName+" ";
                        }
                        $("#content").html(str);
                    }
                },
                error:function(xhr,textStatus,errorThrown){
                }
            });
        });
    });
</script>
    </head>
    <body>
        <button id="testButton">異步傳輸</button>
        <div id="content"></div>
    </body>
</html>

例三:

@RequestMapping("/dataList") 
public void  datalist(CsoftCunstomerPage page,HttpServletResponse response) throws Exception{
    List<CsoftCunstomer> dataList = csoftCunstomerService.queryByList(page);
    //設定頁面資料
    Map<String,Object> jsonMap = new HashMap<String,Object>();
    jsonMap.put("total",page.getPager().getRowCount());
    jsonMap.put("rows", dataList);
     
    try {
        //設定頁面不緩存
        response.setContentType("application/json");
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out= null;
        out = response.getWriter();
        out.print(JSONUtil.toJSONString(jsonMap));
        out.flush();
        out.close();
    } catch (IOException e) {
        e.printStackTrace();
    }
     
}
java json javascript
上一篇: SpringMVC(六) | 前後端互動之ajax與jsonjsonajax
下一篇: Spring MVC:Json互動1、什麼是Json2、環境搭建3、json解析工具4、可能會遇到的問題: 500錯誤

繼續閱讀