mui.ajax执行的次数,MUI的应用——ajax请求+后台操作

该博客详细介绍了使用MUI框架在前端实现生活服务列表的动态加载,通过AJAX请求从后台获取数据,并展示包括标题、状态、发布时间、描述等内容。同时,展示了如何处理服务报价的列表,以及实现撤回功能的详细步骤。后端控制器和DAO层的代码展示了数据获取和删除操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、MUI的前段页面

//加载桌面触发事件

$(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+="

"+serviceInfo[i].sjname

+"

"+serviceInfo[i].bj+""

+"

"+serviceInfo[i].fwsj+""

                +"

dh.png"    //电话的超链接(一个电话图标)

+"

";

});

if(bt.length > 12){

bt = bt.substring(0,12)+"...";

}

if(zt !="待服务"){

$("#shfw").append("

"+

""

+bt+""

+"已服务"

+fbsj+

"

"+

"

结束时间 : "+zt+"

"+

"撤回"+

"

");

} else {

$("#shfw").append("

"+

""

+bt+""

+""+zt+""

+fbsj+"

"

+"

内容描述

"+ms+"

"+

"撤回"+

"

商家报价
"+

"

名称

"

报价(/元)"+

"

时间(/分)"+

"

电话"+

servicestr+"

"+

"

");

}

});

},

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"

}

});

}

二、页面内容

生活服务

商家列表

服务发布

  •     //动态加载生活服务的信息

三、后台写法

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> 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 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 result = new HashMap();

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);

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值