156 lines
4.7 KiB
HTML
156 lines
4.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>Hello MUI</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
|||
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|||
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|||
|
|
|
|||
|
|
<!--标准mui.css-->
|
|||
|
|
<link rel="stylesheet" href="../css/mui.min.css">
|
|||
|
|
<!--App自定义的css-->
|
|||
|
|
<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
|
|||
|
|
<style>
|
|||
|
|
.mui-content-padded {
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
body,body .mui-content {
|
|||
|
|
background-color: #fff !important;
|
|||
|
|
}
|
|||
|
|
code {
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
word-break: normal;
|
|||
|
|
font-size: 90%;
|
|||
|
|
color: #c7254e;
|
|||
|
|
background-color: #f9f2f4;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<header class="mui-bar mui-bar-nav">
|
|||
|
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
|||
|
|
<h1 class="mui-title">ajax（网络请求）</h1>
|
|||
|
|
</header>
|
|||
|
|
<div class="mui-content">
|
|||
|
|
<div class="mui-content-padded" style="padding-bottom: 50px;">
|
|||
|
|
<p style="text-indent: 22px;">
|
|||
|
|
mui基于html5plus的<a href="http://www.dcloud.io/docs/api/zh_cn/xhr.shtml">XMLHttpRequest</a>，封装了常用的ajax函数，支持Get、Post请求方式， 支持返回json、xml、html、text、script数据类型；
|
|||
|
|
</p>
|
|||
|
|
<h4 class="mui-content-padded">发送请求：</h4>
|
|||
|
|
<div class="mui-input-group">
|
|||
|
|
<div class="mui-input-row">
|
|||
|
|
<label>type:</label>
|
|||
|
|
<select id="method">
|
|||
|
|
<option value="get">GET</option>
|
|||
|
|
<option value="post">POST</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="mui-input-row">
|
|||
|
|
<label>dataType:</label>
|
|||
|
|
<select id="dataType">
|
|||
|
|
<option value="html">HTML</option>
|
|||
|
|
<option value="json">JSON</option>
|
|||
|
|
<option value="xml">XML</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="mui-button-row">
|
|||
|
|
<button type="button" id="confirm" class="mui-btn mui-btn-primary">发送请求</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<h4 class="mui-content-padded">获得响应：</h4>
|
|||
|
|
<code id="response"></code>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="../js/mui.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
(function($) {
|
|||
|
|
$.init({
|
|||
|
|
swipeBack:true //启用右滑关闭功能
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var network = true;
|
|||
|
|
if(mui.os.plus){
|
|||
|
|
mui.plusReady(function () {
|
|||
|
|
if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
|
|||
|
|
network = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var methodEl = document.getElementById("method");
|
|||
|
|
var dataTypeEl = document.getElementById("dataType");
|
|||
|
|
var respnoseEl = document.getElementById("response");
|
|||
|
|
//成功响应的回调函数
|
|||
|
|
var success = function(response) {
|
|||
|
|
var dataType = dataTypeEl.value;
|
|||
|
|
if (dataType === 'json') {
|
|||
|
|
response = JSON.stringify(response);
|
|||
|
|
} else if (dataType === 'xml') {
|
|||
|
|
response = new XMLSerializer().serializeToString(response).replace(/</g, "<").replace(/>/g, ">");
|
|||
|
|
}
|
|||
|
|
respnoseEl.innerHTML = response;
|
|||
|
|
};
|
|||
|
|
//设置全局beforeSend
|
|||
|
|
$.ajaxSettings.beforeSend = function(xhr, setting) {
|
|||
|
|
//beforeSend演示,也可在$.ajax({beforeSend:function(){}})中设置单个Ajax的beforeSend
|
|||
|
|
console.log('beforeSend:::' + JSON.stringify(setting));
|
|||
|
|
};
|
|||
|
|
//设置全局complete
|
|||
|
|
$.ajaxSettings.complete = function(xhr, status) {
|
|||
|
|
console.log('complete:::' + status);
|
|||
|
|
}
|
|||
|
|
var ajax = function() {
|
|||
|
|
//利用RunJS的Echo Ajax功能测试
|
|||
|
|
var url = 'https://service.dcloud.net.cn/ajax/echo/';
|
|||
|
|
//请求方式，默认为Get；
|
|||
|
|
var type = methodEl.value;
|
|||
|
|
//预期服务器范围的数据类型
|
|||
|
|
var dataType = dataTypeEl.value;
|
|||
|
|
//发送数据
|
|||
|
|
var data = {
|
|||
|
|
name: "mui",
|
|||
|
|
version: "pre-release",
|
|||
|
|
author: "chb",
|
|||
|
|
description: "最接近原生APP体验的高性能前端框架"
|
|||
|
|
};
|
|||
|
|
url = url + (dataType === 'html' ? 'text' : dataType);
|
|||
|
|
respnoseEl.innerHTML = '正在请求中...';
|
|||
|
|
if (type === 'get') {
|
|||
|
|
if (dataType === 'json') {
|
|||
|
|
$.getJSON(url, data, success);
|
|||
|
|
} else {
|
|||
|
|
$.get(url, data, success, dataType);
|
|||
|
|
}
|
|||
|
|
} else if (type === 'post') {
|
|||
|
|
$.post(url, data, success, dataType);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
//发送请求按钮的点击事件
|
|||
|
|
document.getElementById("confirm").addEventListener('tap', function() {
|
|||
|
|
if(network){
|
|||
|
|
ajax();
|
|||
|
|
}else{
|
|||
|
|
mui.toast("当前网络不给力，请稍后再试");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//点击描述中链接时，打开对应网页介绍；
|
|||
|
|
$('body').on('tap', 'a', function(e) {
|
|||
|
|
var href = this.getAttribute('href');
|
|||
|
|
if (href) {
|
|||
|
|
if (window.plus) {
|
|||
|
|
plus.runtime.openURL(href);
|
|||
|
|
} else {
|
|||
|
|
location.href = href;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})(mui);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|