Ajax 获得服务器数据 和 提交数据
开发APP时少不了向服务器请求数据或提交数据给服务器，我们使用 Ajax 来获得数据和提交数据。
APP是一个本地的客户端，相当于一个手机浏览器，在向服务器请求数据时，会遇到Ajax跨域 Access-Control-Allow-Origin 问题，服务器不允许它访问资源，
这时我们需要在相应的后端语言处理下，允许服务器某个文件可以被跨域访问。
例如：PHP , 我们在PHP 文件里添加以下代码，就可以允许这个文件被跨域访问
header('Content-type:text/json'); // 输出JSON 格式
header('Access-Control-Allow-Origin:*'); //则允许所有域名的脚本访问该资源
header('Access-Control-Allow-Credentials',true); //默认ture 不用理它
header('Access-Control-Allow-Methods', 'POST, GET'); //允许那些方法访问
header('Access-Control-Allow-Headers','x-requested-with,content-type'); //自定义的头信息Ajax，这里我们用的是MUI移动框架封装的 mui.ajax 方法来获得数据和提交数据
mui.ajax("网址",{
data:data,
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data)
{
},
error:function(xhr,type,errorThrown)
{
}
});
除 mui.ajax 外mui还有三个 简化的请求和获得数据的方法，
| 方法名称 | 例子 | 说明 |
|---|---|---|
| mui.post() | mui.post('login.php',{username:'username',password:'password' },function(data) { //服务器返回响应 },'json'); | 不处理timeout和异常, 返回数据，可以是JSON 格式，也可以是文本，要返回文本，把json 去掉就可以 |
| mui.get() | mui.get('list.php',{category:'news'},function(data) { //获得服务器响应 },'json'); | 不处理timeout和异常, 返回数据，可以是JSON 格式，也可以是文本，要返回文本，把json 去掉就可以 |
| mui.getJSON() | mui.getJSON('list.php',{category:'news'},function(data) { //获得服务器响应 }); | 不处理timeout和异常, 返回数据，只能是JSON 格式 |
APP 客户端与服务器 交互信息，一般都是采用JSON 方式比较多，下面示例：
1.APP 客户端请求数据，下是JS
var data={"id":"12","type":"news"};
mui.ajax("http://ss.html5-app/list.php",{
data:data,
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data)
{
//服务器返回数据
},
error:function(xhr,type,errorThrown)
{
//如果出错
}
});
2. 后端 PHP 文件 接收并返回数据
<?php
header('Content-type:text/json');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Credentials',true);
header('Access-Control-Allow-Methods', 'POST, GET');
header('Access-Control-Allow-Headers','x-requested-with,content-type');
if($_SERVER['REQUEST_METHOD']=='GET') //判断客服端是以GET还是POST 方式提交
{
$id=isset($_GET["id"])?$_GET["id"]:exit();
$type=isset($_GET["type"])?$_GET["type"]:exit();
}
else
{
$id=isset($_POST["id"])?$_POST["id"]:exit();
$type=isset($_POST["type"])?$_POST["type"]:exit();
}
//业务处理,读取数据库返回相关数据给客户端，客户端需要返回JSON 格式数据
$data=array();
$data["id"]=$id;
$data["type"]=$type;
echo json_encode($data); //把数组转为JSON 格式数据返回给客户端
?>
加载更多