MUI的应用——ajax请求+后台操作

最新推荐文章于 2023-04-19 17:34:16 发布

choucunz63188

最新推荐文章于 2023-04-19 17:34:16 发布

阅读量641

点赞数

文章标签：运维

原文链接：https://my.oschina.net/u/3217862/blog/885823

版权

一、MUI的前段页面

//生活服务的List列表（用ajax一部请求）
function list_shfw(){

    $.ajax({
   url:'http://192.168.1.111:8081/xcApp/api/zsq_list_shfw.html'
       ,type:"get"
       ,dataType:'json'//服务器返回json格式数据
       ,timeout:10000
       ,success:function(data){
       $.each(data,function(i){
          var bt = data[i].bt;    //后台的字段内容（标题）
          var zt = data[i].zt; //后台的字段内容（状态）
          var fbsj = data[i].fbsj;    //后台的字段内容（发布时间）
          var ms = data[i].ms;    //后台的字段内容（描述内容）
          var serviceInfo = data[i].serviceInfo;    //后台的字段内容（报价的列表，多个）
          var servicestr=""; //将报价的内容拼成一个str字符串
          $.each(serviceInfo, function(i) { //用table
              servicestr+="<tr><td>"+serviceInfo[i].sjname
       +"</td><td>"+serviceInfo[i].bj+"</td>"
       +"<td>"+serviceInfo[i].fwsj+"</td>"
+"<td><a href='tel:"+serviceInfo[i].phone+"'><img src='../img/dh.png' width='25' height='25'/></a></td>" //电话的超链接（一个电话图标）
           +"</tr>";
          });
          if(bt.length > 12){
             bt = bt.substring(0,12)+"...";
          }
          if(zt !="待服务"){
             $("#shfw").append("<li class='mui-table-view-cell mui-collapse'>"+
                       "<a class='mui-navigate-right' href='#'>"
                       +bt+"</a>"
                       +"<span class='hd_tag_js'>已服务</span>"
                       +fbsj+
                       "<div class='mui-collapse-content'>"+
   "<p>结束时间 : "+zt+"</p>"+
   "<span class='hd_tag_jx'><a href='javascript:del("+data[i].id+")' id='showTooltips'>撤回</a></span>"+
   "</div></li>");
          } else {
             $("#shfw").append("<li class='mui-table-view-cell mui-collapse'>"+
               "<a class='mui-navigate-right' href='#'>"
+bt+"</a>"
+"<span class='hd_tag_jh'>"+zt+"</span>"
+fbsj+"<div class='mui-collapse-content'>"
+"<h5>内容描述</h5><p>"+ms+"</p>"+
    "<span class='hd_tag_jx'><a href='javascript:del("+data[i].id+")' id='showTooltips'>撤回</a></span>"+
   "<h4>商家报价</h4>"+
   "<table><tr><td width='30%'>名称</td>"+
   "<td width='30%'>报价(/元)</td>"+
   "<td width='30%'>时间(/分)</td>"+
   "<td width='10%'>电话</td></tr>"+
   servicestr+"</table>"+
   "</div></li>");
          }
       });
       },
       error:function(data){
       }
   });

}

//撤回事件
function del(id){
        alert(id);     //输出选定的id
        mui.ajax(
           'http://192.168.1.111:8081/xcApp/store/cancel.html?id='+id
       ,{dataType:'json'//数据格式类型
       ,type:'GET'
       ,success:function(data){
           if(data.result=="success"){
               mui.toast("发布成功"); //提示发布成功
               location.href= "zsq_shfw_index.html"; //加载页面
           }else{
               mui.alert("发布失败："+data.errorMsg); //提示错误消息
               setTimeout(function(){
                   location.href= "zsq_shfw_index.html";
               },1000)
           }
       },error:function(e){
           //console.warn(e);
       alert("数据异常，请联系管理员");
       location.href= "zsq_shfw_index.html"
       }
       });
}

</script>

二、页面内容

<html>
<body>
       <header id="header">
       <div class="nvbt iback" οnclick="JavaScript :history.back(-1)"></div> //返回上一页
<div class="nvtt">生活服务</div>
       </header>
       <a href="zsq_shfw_sj_list.html">
   <button type="button" class="mui-btn mui-btn-royal" style="margin-top:50px;margin-bottom:5px;width:40%;height:35px;font-size: 1.5rem;">商家列表</button>
       </a>
<a href="zsq_shfw_fw_lb.html">
   <button type="button" class="mui-btn mui-btn-warning" style="margin-top:50px;margin-bottom:5px;width:40%;height:35px;font-size: 1.5rem;float:right;">服务发布</button>
       </a>
       <ul class="mui-table-view" id="shfw"> //动态加载生活服务的信息

       </ul>
   </body>
</html>

三、后台写法

3/1、controller

//生活服务
@RequestMapping(value="/zsq_list_shfw",method=RequestMethod.GET)
public void zsq_list_shfw(HttpServletRequest request,HttpServletResponse response){
     String list= dao.zsq_list_shfw();
     System.out.println(list);
     try {
        IOUtil.writeToResponse(response,list);
    }catch(Exception e){
    e.printStackTrace();
    }
}

//删除数据
@RequestMapping("/cancel")
public void cancel(int id,HttpServletRequest request,HttpServletResponse response){
    System.out.println("cancel----");
    String list="";
    if(id>0){
        try {
            list = dao.cancel(id);
            IOUtil.writeToResponse(response, list);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

3/2、dao

//list--生活服务
public String zsq_list_shfw(){
    List<Map<String,Object>> list=null;
    Gson gson = new Gson();
    try{
     String sql = "select id,bt,zt,ms,fbsj from t_services order by zt desc"; //userid限制
        list=jdbcTemplate.queryForList(sql);
        if (!u.isnull(list)) {
            for (Map<String, Object> map : list) {
                map.put("serviceInfo",jdbcTemplate.queryForList("select (select name from t_seller where id =     b.sjid) sjname,b.bj,b.fwsj,b.phone from  t_serviceinfo b where b.serviceid = '"+map.get("id")+"'"    ));
        }
        }
        System.out.println("shfw--=="+sql);
    }catch(Exception e){
        e.printStackTrace();
    }finally{
    }
    return gson.toJson(list);
}

//删除方法
public String cancel（）{
    Map<String,Object> result = new HashMap<String, Object>();
   try {
    String sql= "delete t_services where id="+id;
jdbcTemplate.update(sql);
result.put("result","success");
} catch (Exception e) {
result.put("result","error");
result.put("errorMsg",e.getMessage());
}
    return new Gson.toJson(result);
}

转载于:https://my.oschina.net/u/3217862/blog/885823