13 APP与服务器之间的交互原理、MUI Ajax使用

13 APP与服务器之间的交互原理、MUI Ajax使用

烷委枯阜尉凡貌赤廊惨判剿典

参考文档

13 APP与服务器之间的交互原理、MUI Ajax使用第1张

13 APP与服务器之间的交互原理、MUI Ajax使用第2张

13 APP与服务器之间的交互原理、MUI Ajax使用第3张

13 APP与服务器之间的交互原理、MUI Ajax使用第4张

13 APP与服务器之间的交互原理、MUI Ajax使用第5张

13 APP与服务器之间的交互原理、MUI Ajax使用第6张


实际操作服务器端代码(注意:需要将代码放在服务器端即可以联网的情形下,放在本地(127.0.0.1)等无法联网的情况下是无效的):

http://www.xuexianswer.com/mui/index.php

<?php
echo "hello MUI";

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" id="btn1">获取服务器端数据</button>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			document.getElementById('btn1').addEventListener('tap',function(){
				mui.ajax({
					url : 'http://www.xuexianswer.com/mui/index.php',
					type : 'GET',
					success : function(data){
						mui.toast(data);
					},
					error : function(xhr,type,errorThrown){
						mui.toast(type);
					}
				});
			
				
			});
		});
	</script>
</body>
</html>

执行,点击按钮

13 APP与服务器之间的交互原理、MUI Ajax使用第7张

改为一个不存在的网址:http://www.xuexianswer.com/mui/index2.php 会提示错误


post请求

http://www.xuexianswer.com/mui/index.php

<?php
echo "姓名:{$_POST['name']},年龄:{$_POST['age']}";

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" id="btn1">获取服务器端数据</button>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			document.getElementById('btn1').addEventListener('tap',function(){
				mui.ajax({
					type : 'POST',
					url : 'http://www.xuexianswer.com/mui/index.php',
					data:{'name':"mui","age":18},
					success : function(data){
						mui.toast(data);
					},
					error : function(xhr,type,errorThrown){
						mui.toast(type);
					}
				});
			
				
			});
		});
	</script>
</body>
</html>

执行:

13 APP与服务器之间的交互原理、MUI Ajax使用第8张

mui.toast(type);出错提示可以直接提示为:服务器繁忙即可


类型默认是text文本类型

改为JSON类型

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" id="btn1">获取服务器端数据</button>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			document.getElementById('btn1').addEventListener('tap',function(){
				mui.ajax({
					type : 'POST',
					url : 'http://www.xuexianswer.com/mui/index.php',
					data:{'name':"mui","age":18},
					success : function(data){
						mui.toast(data);
					},
					dataType:"json",
					error : function(xhr,type,errorThrown){
						mui.toast(type);
					}
				});
			
				
			});
		});
	</script>
</body>
</html>

执行,会提示语法错误

13 APP与服务器之间的交互原理、MUI Ajax使用第9张

修改方式:

http://www.xuexianswer.com/mui/index.php

<?php
$arr=["name"=>$_POST['name'],"age"=>$_POST['age']];
echo json_encode($arr);

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" id="btn1">获取服务器端数据</button>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			document.getElementById('btn1').addEventListener('tap',function(){
				mui.ajax({
					type : 'POST',
					url : 'http://www.xuexianswer.com/mui/index.php',
					data:{'name':"mui","age":18},
					success : function(data){
						mui.toast(data.name);
					},
					dataType:"json",
					error : function(xhr,type,errorThrown){
						mui.toast(type);
					}
				});
			
				
			});
		});
	</script>
</body>
</html>

执行:

13 APP与服务器之间的交互原理、MUI Ajax使用第10张


简化方法:

post

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" id="btn1">获取服务器端数据</button>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			document.getElementById('btn1').addEventListener('tap',function(){
				mui.post(
					'http://www.xuexianswer.com/mui/index.php',
					{'name':"mui","age":18},
					function(data){
						mui.toast(data.name);
					},
					'json'
				);
			
				
			});
		});
	</script>
</body>
</html>

执行:

13 APP与服务器之间的交互原理、MUI Ajax使用第10张


getJSON()

http://www.xuexianswer.com/mui/index.php

<?php
$arr=["name"=>'test'];
echo json_encode($arr);

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" id="btn1">获取服务器端数据</button>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			document.getElementById('btn1').addEventListener('tap',function(){
				mui.getJSON(
					'http://www.xuexianswer.com/mui/index.php',
					function(data){
						mui.toast(data.name);
					}
				);
			
				
			});
		});
	</script>
</body>
</html>

执行:

13 APP与服务器之间的交互原理、MUI Ajax使用第12张


碗涎藉剁前拈弦返舍夸抛滴甜