烷委枯阜尉凡貌赤廊惨判剿典
参考文档
实际操作服务器端代码(注意:需要将代码放在服务器端即可以联网的情形下,放在本地(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>
执行,点击按钮
改为一个不存在的网址: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>
执行:
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>
执行,会提示语法错误
修改方式:
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>
执行:
简化方法:
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>
执行:
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>
执行:
碗涎藉剁前拈弦返舍夸抛滴甜