前言：本人自學前端開發，一直想研究下js獲取接口數據在html的實現，順利地找到了獲取數據的方法，但是有部分接口在調用中出現無法展示數據。經查，發現時跨域的問題，花費了一通時間，隨筆記錄下過程，以方便后來的童鞋。歡迎指正。
正文：
一、使用js獲取接口數據的方法
①$get(url,[data],[callback])
url:請求的地址;data:請求數據的列表;callback:請求成功后的回調函數,該函數接受兩個參數,第一個為服務器返回的數據,第二個為服務器的狀態,是可選參數。
其中服務器返回數據的格式其實是字符串形式,並不是我們想要的JSON數據格式。上例子：
var url3 = 'http://mshop.gemstc.com/ApiService/msgget.PHP';
$.get(url3,function(data){
alert(data);
});
此時如果對data采用json解析數據，得到的值為undefined。所以我們使用這種get方法獲取到的值要是JSON格式，需要定義獲取的數據類型為json格式，上例子：
var url3 = 'http://mshop.gemstc.com/ApiService/msgget.php';
$.get(url3,function(data){
$('#result').append('<p>interval:'+data.name+'</p>') //此時返回的是JSON格式的內容，例：我們可以使用data.name獲取到name字段的值並輸出。
}, 'json');
②$post(url,[data],[callback],[type])
post方法中多了一個type：獲取數據的類型格式，post其實和get是一樣的用法，type不定義，返回的是字符串類型的，定義為json格式，返回的就是json格式的數據，此處可以仿照上面的get方法，把get改成post就搞定了，就不多說了。
③$ajax(opiton)
ajax功能比較強大，自己可以去查相關資料學習了解(http://blog.csdn.NET/wolf6699/article/details/50039627)，可以有很多精確的控制，這里直接上例子：
$.ajax({
url: url,
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:function(data){
$('#result').append('<p>interval:'+data.interval+'</p>')
//alert("22");
},
error:function(er){
//alert("11");
BackErr(er);
}
});
④$getJSON(url,[data],[callback])
此處參數和get方法是一致的，直接上例子：
$.getJSON(url,function(data){
alert(data.name);
});
以上類型因為接口訪問時沒有帶參數，所以[data]這個參數我都省去了。如果有參數的話，格式為：
{
id : 'Robin',
password: '123456',
gate : 'index'
}
二、跨域問題的解決
在使用以上方法獲取接口數據的過程中，我們突然發現有些接口無法將數據獲取展示出來，使用chrome瀏覽器調試，我們發現報錯如圖：
此處我們使用設置Access-Control-Allow-Origin來實現跨域訪問。
在被請求的Response header中加入
// 指定允許其他域名訪問
header('Access-Control-Allow-Origin:*');
// 響應類型
header('Access-Control-Allow-Methods:POST');
// 響應頭設置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
這樣就可以實現ajax的跨域訪問。
此處貼上示例代碼以幫助大家上手，例HTML代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title> 跨域測試 </title>
<script src="//code.jQuery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="show"></div>
<script type="text/JavaScript">
$.post("http://xxx.xxx.xxx/data.php",{name:"fdipzone",gender:"male"})
.done(function(data){
document.getElementById("show").innerHTML = data.name + ' ' + data.gender;
});
</script>
</body>
</html>
php代碼:http://xxx.xxx.xxx/data.php
<?php
$ret = array(
'name' => isset($_POST['name'])? $_POST['name'] : '',
'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
);
header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
echo json_encode($ret);
?>
這里Access-Control-Allow-Origin:*表示允許任何域名跨域訪問。
如果需要指定某域名才允許跨域訪問，只需把Access-Control-Allow-Origin:*改為Access-Control-Allow-Origin:允許的域名
例如：header('Access-Control-Allow-Origin:http://www.baidu.com');
如果需要設置多個域名允許訪問，這里需要用php處理一下
例如允許 www.baidu.com 與 www.sina.com 可以跨域訪問
<?php
$ret = array(
'name' => isset($_POST['name'])? $_POST['name'] : '',
'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
);
header('content-type:application:json;charset=utf8');
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
$allow_origin = array(
'http://www.baidu.com',
'http://www.sina.com'
);
if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
}
echo json_encode($ret);
?>