mui ajax 跨域 php,mui ajax 跨域问题如何解决!!!!

本文介绍了使用mui.js库实现在移动端下拉刷新和上拉加载更多数据的功能。通过设置回调函数处理请求,实现了与服务器的交互,同时处理了跨域问题。在接收到数据后,动态更新页面内容,并根据数据量判断是否结束加载状态。涉及到的技术点包括XMLHttpRequest、JSON解析和DOM操作。
摘要由CSDN通过智能技术生成

mui.init({

pullRefresh: { //下拉

container: "#pullrefresh",

down: {

contentdown: "下拉加载",

contentover: "释放刷新",

contentrefresh: "正在加载..",

callback: pulldownRefresh

},

up: {

contentrefresh: '加载中',

contentnomore: '没有更多数据了',

callback: pullupRefresh

}

}

});

function pulldownRefresh() {

//以下处理跨域

PageNo = 1;

type = 2;

request = new XMLHttpRequest();

request.open("POST", "http://xxx.com");

var data = 'PageSize=' + PageSize + '&PageNo=' + PageNo;

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

request.onreadystatechange = chuli;

request.send(data);

PageNo = 2;

}

function pullupRefresh() {

type = 1;

request = new XMLHttpRequest();

request.open("POST", "http://xxx.com");

var data = 'PageSize=' + PageSize + '&PageNo=' + PageNo;

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

request.onreadystatechange = chuli;

request.send(data);

PageNo += 1;

}

function chuli() {

if (request.readyState === 4) {

if (request.status === 200) {

var data = JSON.parse(request.responseText);

if (data.code == 200) {

var msg = data.data;

var count = data.mes;

var table = document.body.querySelector('.mui-table-view');

if (type == 2) {

table.innerHTML = '';

}

var cells = document.body.querySelectorAll('.mui-table-view-cell');

for (var i = 0; i < msg.length; i++) {

msg[i].smeta = JSON.parse(msg[i].smeta);

var li = document.createElement('li');

li.className = 'mui-table-view-cell';

li.innerHTML = ''%20+%20msg%5Bi%5D.smeta.thumb%20+%20'' +

'

' + msg[i].post_title + '

' + msg[i].post_excerpt + '

';

if (type == 1) { //上拉

table.appendChild(li);

} else {

table.insertBefore(li, table.firstChild);

}

}

if (type == 1) { //上拉

if (PageNo >= count) {

mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);

}

} else {

mui('#pullrefresh').pullRefresh().endPulldownToRefresh();

//mui('#pullrefresh').pullRefresh().refresh(true);

}

} else {

mui.toast(data.mes);

}

} else {

mui.toast('不是代码问题');

}

}

}

//刚进来下拉

function pageInit() {

if (mui.os.plus) {

mui.plusReady(function() {

setTimeout(function() {

mui('#pullrefresh').pullRefresh().pulldownLoading();

}, 500);

});

} else {

mui.ready(function() {

mui('#pullrefresh').pullRefresh().pulldownLoading();

});

}

}

function openMenu() {

!index && (index = mui.currentWebview.parent());

mui.fire(index, "menu:open");

}

var index = null; //主页面

var PageNo = 1;

var PageSize = 8;

var request = "";

var type = 2; //1上拉 2下拉

pageInit();

以上是我处理跨域的方法 服务器端php还要设置 header('Access-Control-Allow-Origin:*');

如果是用jsonp的话数据量不能太大,希望能帮到你们

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值