前后端数据交互分析

后端controller代码 (保证后端返回的是一个json格式的字符串)

    @RequestMapping(value = { "/api/list" })
    @ResponseBody
    public Map<String, Object>(
            String cardNum,
            String startDate,
            String endDate,
            ModelMap map
    ) {
        // 表单数据字段(模糊查询)
        Map<String,Object> data = userService
                          .getUserByConditions(cardNum, startDate, endDate);
        map.put("data", data.get("data"));
     
        // 查询字段
        map.put("cardNum", data.get("cardNum"));
        map.put("startDate", data.get("startDate"));
        map.put("endDate", data.get("endDate"));
       return map;
    }

一、ajax接受数据
前端代码

<script>
function getDataFn(){
   $.ajax({
       url:"/api/list",  //请求数据的API, 逗号不要忘记
       success:function(result) { //请求到的数据被封装到了result里面，名字随便取
          var obj = JSON.parse(data); //json字符串转为json对象, 必须要
             for(var i in obj) {  //测试, 页面控制台查看输出的元素
                console.log(i,":",obj[i]);  // 分隔符号必须是逗号
              }
           console.log(obj.addr); // 取值方式
       }
   });
}
</script>

二、ajax提交数据

<div class="sInput1">
     <input maxlength="12" id="cardNum"  class="form-control" type="text" placeholder="请输入卡号" style="width:180px; height:35px;">&nbsp;&nbsp;
     <input  id="startDate" name="startDate" class="laydate-icon " readonly="readonly" placeholder="请输入开始日期">&nbsp;&nbsp;
     <input  id="endDate"  name="endDate" class="laydate-icon" readonly="readonly" placeholder="请输入结束日期">&nbsp;&nbsp;
     
     <button id="excel"  class="btn btn-info" >导出查询结果</button>
</div>

<script>
 function getDataFn(){
    //需向后端传递的参数
    var cardNum = $('#cardNum').val(); //获取input中的值
    var startDate = $('#startDate').val();
    var endDate = $('#endDate').val();
    $.ajax({
        url:  "/api/list",  //请求数据的API, 逗号不要忘记
        data:{              //json对象
          cardNum:cardNum,
          startDate:startDate,
          endDate:endDate
     },
     success:function(result){
         var obj = JSON.parse(data); //json字符串转为json对象
     }
  });
}
</script>

三、表单提交数据

<form id="form" method="post" action="/api/list">
    <div class="sInput1">
        <input maxlength="12" id="cardNum"  class="form-control" type="text" placeholder="请输入卡号" style="width:180px; height:35px;">&nbsp;&nbsp;
        <input  id="startDate" name="startDate" class="laydate-icon " readonly="readonly" placeholder="请输入开始日期">&nbsp;&nbsp;
        <input  id="endDate"  name="endDate" class="laydate-icon" readonly="readonly" placeholder="请输入结束日期">&nbsp;&nbsp;
     
        <button type="button" type='submit'>提交</button>
    </div>
</form>
注: 1.type="submit" 会将具有name属性的html输入元素(包括input  
      标签、button标签、select标签等)都将作为键值对提交
    2.type="submit"submit会有一个跳转，页面会刷新