简单易懂,如何将后台获取的数据显示到页面上

// 1,通过ajax查询
function query() {
  var applyNo = $("#applyNo").val();//获取页面的查询条件
  var entName = $("#entName").val();
  var formName = $("#formName").val();
  var socialCode = $("#socialCode").val();
  var certNo = $("#certNo").val();
  var beginTime = $("#beginTime").val();
  var endTime = $("#endTime").val();
  /*if(beginTime !=null || beginTime !=""){
    beginTime = beginTime.replace(/-/g,'');//替换所有-
  }
  if(endTime !=null || endTime !="") {
    endTime = endTime.replace(/-/g,'');
  }*/
  var requestUrl = context + "/service/bizapply/queryInfo";
//  var requestUrl = context + "/service/bizapply/queryInfo/" + entName + "/"+ formName;
  $.ajax({
    type : "post",
    dataType : "json",
    data : {
      "applyNo" : applyNo,
      "entName" : entName,
      "formName" : formName,
      "socialCode" : socialCode,
      "certNo" : certNo,
      "beginTime" : beginTime,
      "endTime" : endTime,
      },
    url : requestUrl,
    success : function(Json) {//Json为后台model里传过来的数组
      var obj = eval(Json.data);//注意,list里可能不是个单纯数组,因此需要取data
      $("#dataList tbody").html("");//先清空表,再将查询的数据拼接上去
      for (var i=0;i<obj.length;i++) {//循环遍历
        //下面这段代码主要是针对数据库中日期类型数据(date)做的处理,如果不进行处理,前台页面
        显示的是日期的属性而不是具体的日期,大家可以尝试试验下
        var date = new Date(obj[i].SUBMIT_TIME);
//      var submitTime = new Date(obj[i].SUBMIT_TIME).toLocaleString();
        var year=date.getFullYear(); 
        var mon=date.getMonth()+1;
        var day=date.getDate();
        var h=date.getHours(); 
        var m=date.getMinutes();
        var s=date.getSeconds(); 
        var submitTime = "";
        submitTime += year + "-";
        if(mon >= 10) {
          submitTime += mon + "-";
        }else {
          submitTime += "0" + mon + "-";
        }
        if(day >= 10) {
          submitTime += day;
        }else {
          submitTime += "0" + day;
        }
        submitTime +=" ";
        if(h >= 10) {
          submitTime += h + ":";
        }else {
          submitTime += "0" + h + ":";
        }
        if(m >= 10) {
          submitTime += m;
        }else {
          submitTime += "0" + m;
        }
        
        var $tr = $("<tr align='center'></tr>");
        $tr.append("<td>"+(i+1)+"</td>");
        $tr.append("<td>"+obj[i].APPLY_NO+"</td>");
        $tr.append("<td>"+obj[i].ENT_NAME+"</td>");
        $tr.append("<td>"+obj[i].SOCIAL_CODE+"</td>");
        $tr.append("<td>"+obj[i].FORM_NAME+"</td>");
        $tr.append("<td>"+obj[i].FORM_ID+"</td>");
//        $tr.append("<td>"+year+"-"+mon+"-"+day+" "+h+":"+m+"</td>");
        $tr.append("<td>"+submitTime+"</td>");
        $tr.append("<td>"+obj[i].CERT_NO+"</td>");
        $("#dataList tbody").append($tr);
      }
    },error: function () {
        alert("加载失败");
    }
  });
}
//后台写法,此处只返回model
    @RequestMapping(value = "/queryInfo", method = RequestMethod.POST)

    @ResponseBody
    public Map<String, Object> queryInfo(String entName, String formName, String socialCode, String certNo,
            String applyNo, String beginTime, String endTime, HttpServletRequest request) {
        Map<String, Object> model = new HashMap<String, Object>();
        List<Map<String, String>> data = applyService.complexQuery(entName, formName, socialCode, certNo, applyNo,
                beginTime, endTime);
        model.put("data", data);
        model.put("total", data.size());
        return model;
    }

// 2,通过form查询
function query() {
  var applyNo = $("input[name='applyNo']").val();
  var entName = $("input[name='entName']").val();
  var socialCode = $("input[name='socialCode']").val();
  var formName = $("input[name='formName']").val();
  var certNo = $("input[name='certNo']").val();
  var beginTime = $("input[name='beginTime']").val();
  var endTime = $("input[name='endTime']").val();
  queryFormId.action = context + "/service/bizapply/queryInfo";
  queryFormId.method = "POST";
  queryFormId.submit();
}
//form查询Jsp页面详细写法
 <form id="queryFormId" name="queryFormId" class="form-horizontal"  role="form" method="POST">
            <div class="col-md-12">
                <fieldset>
                    <table class="table table-bordered">
                        <tr>
                            <td class="fieldLabel" style="width: 10%;">网上申请号:</td>
                            <td class="fieldInput" style="width: 20%;">
                                <input type="text" class="form-control ue-form Validform_input" id="applyNo" name="applyNo" style="width:80%;" value="${queryData.applyNo}" />
                            </td>
//后台写法,注意queryData,这是条件回显,后台变为了返回modelAndView,页面会刷新,虽然查询显示出来了数据,但是输入的查询条件会不存在,因此后台方法需要变化
@RequestMapping(value = "/queryInfo",method = RequestMethod.POST)
    @ResponseBody
    public ModelAndView queryInfo(@RequestParam Map<String,Object> map, HttpServletRequest request) {
	    String entName = (String) map.get("entName");
	    String formName = (String) map.get("formName");
	    String socialCode = (String) map.get("socialCode");
	    String certNo = (String) map.get("certNo");
	    String applyNo = (String) map.get("applyNo");
	    String beginTime = (String) map.get("beginTime");
	    String endTime = (String) map.get("endTime");
        Map<String, Object> model = new HashMap<String, Object>();
        model.put("message", "欢迎进入查询页面");
        List<Map<String, String>> data = applyService.complexQuery(entName, formName, socialCode, certNo, 
                applyNo, beginTime, endTime);
        Map<String,String> queryData = new HashMap<String, String>();
        queryData.put("entName",entName);
        queryData.put("formName",formName);
        queryData.put("socialCode",socialCode);
        queryData.put("certNo",certNo);
        queryData.put("applyNo",applyNo);
        queryData.put("beginTime",beginTime);
        queryData.put("endTime",endTime);
        model.put("queryData",queryData);
        model.put("data",data);
        return new ModelAndView("/bizapply/apply/query/complex_query",model);
    }

 

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值