mui与后台的交互

       最近做一个项目手机端与PC端,手机端前台用的是mui。说起mui想起了,该如何与后来进行交互?

       其实跟easyui类似,只是在写ajax的时候有写区别,代码如下:

function paperDetails(){
			mui.ajax({
				type:'POST',
				url:'<%=basePath%>'+"paperdetails/paperInfo",
				dataType:"json",
				success:function(data){
					obj = data;					
				}
			})			
		}		

      知识之间是相同的,学习和运用善于找到其共同点。

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
你可以使用mui的ajax方法来请求数据,并使用模板引擎生成列表和分页。 首先,你需要引入mui和模板引擎库。可以在HTML文件中添加以下代码: ``` <!-- MUI CSS --> <link rel="stylesheet" href="//cdn.staticfile.org/mui/3.7.1/css/mui.min.css"> <!-- MUI JS --> <script src="//cdn.staticfile.org/mui/3.7.1/js/mui.min.js"></script> <!-- 模板引擎库 --> <script src="//cdn.staticfile.org/template.js/0.7.1/template.min.js"></script> ``` 接下来,你可以在JS文件中使用ajax方法请求数据。例如: ``` mui.ajax('/api/data', { type: 'get', success: function(data) { // 使用模板引擎生成列表 var html = template('list-template', data); document.getElementById('list').innerHTML = html; }, error: function(xhr, type, errorThrown) { // 错误处理 } }); ``` 这里的`/api/data`是你后端提供的接口地址,可以根据实际情况修改。`list-template`是你在HTML中定义的模板ID,例如: ``` <script id="list-template" type="text/html"> {{each data}} <li>{{name}}</li> {{/each}} </script> ``` 这里使用了模板引擎的语法,可以根据自己的需求修改。 最后,你还需要添加分页的代码。可以使用mui的分页插件mui-pager。例如: ``` <div id="pager" class="mui-pager"> <button class="mui-btn mui-btn-prev">上一页</button> <button class="mui-btn mui-btn-next">下一页</button> </div> <script> mui('#pager').pager({ page: 1, pageSize: 10, pageCount: 5, prevText: '上一页', nextText: '下一页', gotoText: '跳转到', showNumber: true, showSkip: true, styles: { prev: 'mui-btn mui-btn-prev', next: 'mui-btn mui-btn-next', active: 'mui-active', number: 'mui-btn', skip: 'mui-pager-skip', disabled: 'mui-disabled' }, onChange: function(page) { // 切换页码时重新请求数据 getData(page); } }); </script> ``` 这里的`getData`函数是你前面定义的请求数据的函数,可以根据自己的需求修改。 这样,你就可以使用mui ajax生成列表和分页了。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值