mui ajax
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>直播生活商家端-订单大厅</title>
<script src="../../js/flexible.js"></script>
<script src="../../js/mui.min.js"></script>
<link rel="stylesheet" href="../../fonts/iconfont.css" />
<link rel="stylesheet" href="../../css/mui.min.css" />
<link rel="stylesheet" href="../../css/init.css" />
<link rel="stylesheet" type="text/css" href="../../css/gz_css.css" />
</head>
<body style="background-color: #f7f7f7">
<header class="mui-bar mui-bar-nav gz_bar">
<h1 class="mui-title">订单大厅</h1>
</header>
<div class="mui-content gz_order_index" id="order_index">
<div class="gz_box">
<ul class="mui-table-view gz_order_ul">
<li class="mui-table-view-cell mui-media gz_order_li gz_xiangqing" v-for="val in order" :data-id="val.order_id">
<a href="javascript:;" class="gz_order_li_a">
<div class="gz_order_top">
<span class="gz_order_top_left">订单号:<em>{{val.order_sn}}</em></span>
<span class="gz_order_top_right">{{val.add_time}}</span>
</div>
<div class="gz_order_index_li_body">
<div class="gz_order_body_1">
<h1><em>{{val.order_id}} {{val.consignee}}</em>{{val.mobile}}</h1>
</div>
<div class="gz_order_body_2">
<h1><span>12:00</span><span>前送达</span></h1>
<ul>
<li v-for="val2 in val.goods_list">/*循环套循环*/
<h3>{{val2.goods_name}}</h3>
<h4>x{{val2.goods_num}}</h4>
<h5>¥{{val2.goods_price}}</h5>
</li>
</ul>
</div>
<div class="gz_order_body_3">
<button type="button" class="mui-btn mui-btn-block mui-btn-primary gz_jiedan">接单</button>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="gz_button_box_show"></div>
<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/Vue.js"></script>
<script src="../../js/common.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({});//初始化
var order_index_vue = new Vue({
el: '#order_index',
data: {
order: [] //order
},
methods: {
get_shangjia_info: function() {
var that = this;
mui.ajax(site_url + '/Home/Business/getOrderList', {
data: {
token: plus.storage.getItem('token'),
type: 0
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒,超时报错;
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function(data) {
console.log(JSON.stringify(data));
if(data.status == 1) {//状态为1,正常
that.order = data.data,
console.log(JSON.stringify(that.order))
} else {
mui.toast(data.msg)
}
},
error: function(xhr, type, errorThrown) {
console.log('网络错误');
}
});
}
}
})
mui.plusReady(function() {
order_index_vue.get_shangjia_info();
});
$(".gz_order_ul").on("click", ".gz_order_li", function(e) {
console.log(111);
e.stopPropagation();
var id = this.getAttribute("data-id");//获取产品的data-id
// console.log(id);
// alert(id);
mui.openWindow({
url: "../order/order_details.html",
id: "order_details",
extras:{
order_index_id:id
},
})
})
$(".gz_order_ul").on("click", ".gz_jiedan", function(e) {
console.log(1222);
e.stopPropagation(); //阻止冒泡,列表里面有按钮要点击的时候
var jiedan = plus.webview.currentWebview().selfid; //通过id获取页面
var botton = plus.webview.getWebviewById(jiedan);
mui.fire(botton, "jiedan", ''); //自定义事件
})
</script>
</body>
</html>
总结:
套数据步骤:
1,套数据时,首先看看是否引入了vue.js和域名;
2,new一个vue
3,vue最外面的父级放上id
4,模拟数据。data:{假数据},让页面展示出来
5,调接口,让页面变活
6,列表页,数据空做判断,数据空提示暂无数据,下拉刷新,上拉加载
注意事项:
1,使用vue时,列表是需要循环出来的, v-for="val in order",{{val.order_sn}}
2,使用ajax时候不要忘记调用
3,使用class,id名,不要忘记.,#
4,事件绑定失败,点击事件不触发:
1.找到事件的方法,里面console一下,没有在外面在console
2.页面有没有报错
3.看绑定事件,名字对不对。class少没有,{}对不对,逗号,冒号,分号,类名点,id#
4.报错...is not a function 找到了报错页面,是否报错,检查那句报错了,单词跟上面是否对起来了
mui ajax的更多相关文章
- Mui.ajax请求服务器正确返回json数据格式
ajax: mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, d ...
- MUI AJAX Raw请求数据
提交接口数据,接口方提供的是post请求,body - raw ; 我尝试过JQuery ajax raw 的方式,但是始终无法成功 然后我回想到我用的是mui我就开始考虑用mui.ajax结果就成功 ...
- Hbuilder app开发,使用mui.ajax和服务器交互,后台获取不到值,显示null的解决方法
先上一个能用的js代码: function login() { var uname=document.getElementById("username").value.trim() ...
- Mui --- app与服务器之间的交互原理、mui ajax使用
1.APP与服务器之间的交互原理 app端(客户端)与服务端的交互其实理解起来和容易,客户端想服务器端发送请求,服务器端进行数据运算后返回最终结果.结果可以是多种格式: 1.text 文本格式 2.x ...
- MUI ajax数据请求(list)
服务器返回格式 { "code": "1001", "message": "查询成功", "data" ...
- mui.ajax与服务器(SpringMVC)传输json数据
跨域问题 PC端为了安全,所以禁止跨域.而我使用mui做移动web时,难免会使用pc浏览器进行调试.mui.ajax是允许跨域的.为了可以调试成功,需要对浏览器进行设置及.以360急速浏览器为例,设置 ...
- mui ajax 应用的跨域问题
1.首先在mui.ajax的error函数里出现: “syntaxerror unexpected token <” 这样的错误,那么在 mui.ajax中的type写成 JSONP ,后台需 ...
- mui ajax方法
mui ajax方法详解: mui提供了mui.ajax,在此基础上有分装出mui.get()/mui.getJSON()/mui.post()三个方法. mui.ajax( url [,settin ...
- mui.ajax返回type为abort
最近在使用h5和mui开发app,发现mui.ajax有一个小bug 情况一: 参数和请求路径无误,但是总是调起失败的回调函数,打印出 type=abort (终止请求) 原因: mui.ajax默认 ...
- mui ajax提交问题点
<script type="text/javascript" charset="utf-8"> mui.init(); mui.ajax(__tes ...
随机推荐
- 一文读懂什么是一致性hash算法
Hash,一般翻译做散列.杂凑,或音译为哈希,是把任意长度的输入通过散列算法变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入值的空间,不同的输入可能会 ...
- 再次聚焦DOCKER MACHINE CODE 2048
如果有一种feeling让世界难以释怀,那一定是发掘(挖土机那家强?)了什么了不起的东西 如果有一种贴图叫做深夜,仍不止息,那一定是饱含深意的贴图 // TODO: I'm not super hap ...
- 题解P1104生日
\(\color{blue}{P1104 生日(题目传送门)}\) 这道题的大意是:给出n个人的出生日期,让我们按年龄(就是先比年份,再比月份和日期,这是常识好吧)大小来排序,如果相同则按输入顺序排序 ...
- MySQL优化---主从复制
主机所有写的数据都会生成二进制SQL日志执行文件,从机只需要将SQL日志执行文件获取到,然后进行数据同步即可 一.MySQL环境搭建(一主一从相同操作) MySQL-master:192.168.33 ...
- mysql 8.0.12版本 忘记密码
1.mysqld --console --skip-grant-tables --shared-memory 2.另一个控制台 mysq 3.use mysql; 4.select user,host ...
- lwip nd没有实现ra,contik有参考
lwip中关于nd的实现,没有路由器的功能,不能发送ra 在contiki中发现有nd发送ra的实现, contiki/core/net/ipv6/uip-ds6.c 在rs的接收处理中,发送soll ...
- Linux 下用 superpi 测试 CPU 性能
- ZYNQ入门实例——三种GPIO应用、中断系统及软硬件交叉触发调试
一.前言 Xlinx的ZYNQ系列SOC集成了APU.各种专用外设资源和传统的FPGA逻辑,为ARM+FPGA的应用提供助力,降低功耗和硬件设计难度的同时极大提高两者间传输的带宽.之前在研究生课题中使 ...
- 寒假答辩作品:Java小游戏
目录 java入门小游戏[test] 游戏界面 前言 (可直接跳到程序介绍) 前期入门小项目 前期收获 后期自创关卡 后续 java入门小游戏[test] 游戏界面 github地址: https:/ ...
- redis系列-要命的zrangebyscore
0x0 引子 无论做哪种业务都躲不开排行功能.Redis 的 Sorted Sets 结构就是为排行而生的.它简单易用,效率奇高.同时它也有坑,你真的了解它吗? 老规矩,先讲故事,后科普.这里是 So ...