文档章节

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

 小琴子_小白
发布于 2017/04/24 10:58
字数 772
阅读 27
收藏 0

一、MUI的前段页面

<script type="text/javascript">
 //加载桌面触发事件
 $(document).ready(function(){
    list_shfw();
 });

 //生活服务的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" onclick="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);
}

© 著作权归作者所有

共有 人打赏支持
上一篇: mui的折叠面板
下一篇: 百度地图插件
粉丝 0
博文 13
码字总数 5035
作品 0
苏州
私信 提问
mui 完成了一个IOS项目

有一段时间没有写博客了,今天还在公司加班,处理最后一个遗留下来的大BUG,就是通过html5+ 的 plus.uploader 来上传图片的功能始终不能实现,PHP接收文件的代码似乎走不通。使用$FILE也不行...

Chendj
2015/12/13
2.7K
3
基于jquery的全局ajax函数处理session过期后的ajax操作

做web常常需要考虑session过期的问题,session过期就让页面跳转到登录界面去,但是存在这样一个问题,当页面过期后,用户请求后台的方式有两种:传统方式和异步请求方式,传统方式倒好解决,...

十月阳光
2014/01/19
0
0
小白来实现一个Ajax请求[Ajax使用方法及相关知识点详细解析——超级全]

写在前面: 本文主要总结整理Ajax使用方法背景知识点的详细解析,以及Ajax跨域的具体使用方式并且对栗子进行了讲解,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望通...

OB丶Koro1
2017/06/01
0
0
关于Ajax和websocket的区别以及使用场景!

在我们日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和websocket,它们可是数据交互的利器,那么它们分别是什么?websocket与Ajax轮询的区别又是什...

itxcc
2018/10/22
0
0
HBuilder 入门(5) 编写一个登录页面 - Ajax交互

使用AJAX方式,页面不会因为刷新而现实大白页。 交互这部分可以分成两个部分:服务器端和客户端。 服务端以Java语言为例子(因为我只做过Java的)。其实 c#或者php等语言实现起来也都是基本一...

chenzl0723
2017/12/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

技术复习-Spring事务

spring事务 1.事务传播机制 在spring中事务存在嵌套的情况,在这种情况下事务如何协调,spring在TransactionDefinition中设了七个规则,被称作事务的传播机制 1.TransactionDefinition.PROP...

Lubby
22分钟前
1
0
linux 虚拟机安装

一、虚拟化检查 1. 检查cpu是否支持 grep -E 'vmx|svm' /proc/cpuinfo 2. 检查虚拟化是否开启 lsmod |grep kvm 显示内容与截图一致,服务器已经开启了虚拟化的支持,如果没有前2条内容,...

小儿
22分钟前
2
0
Linux之系统日志简介

前言 日志在排查文件的时候至关重要,在Linux上一般跟系统相关的日志默认都会放到/var/log下面。 1、/var/log/boot.log 一般包含系统启动时的日志,包括自启动的服务。 2、/var/log/btmp 记录...

城市之雾
22分钟前
1
0
Android数据存储2 文件存储

1.内部存储(私有的,其他程序不能获取) a. 存:FileOutputStream fos = openFileOutput("file", MODE_PRIVATE); 读: FileInputStream fis = openFileInput("file"); 文件路径:data/data/当......

Coding缘
23分钟前
1
0
23种设计模式全解析

一、设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式,共七种:适配器模式、装饰器模式、代理...

嘿嘿嘿IT
23分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部