XMLHttpRequest cannot load 错误: 发生了跨域
什么情况会发生跨域?
1.域名,X级域名不同,端口号不同会发生跨域
进行AJAX请求的文件所在的服务器的域名:端口号
和请求的url所在的服务器的域名:端口号 不一致
解决跨域方式:
1.代理
2.jsonp
3.iframe
iframe解决跨域问题
<iframe src="http://www.baidu.com/s?wd=蓝色天空" frameborder="0" width="100%" height="100%"></iframe>
代理解决跨域问题
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
ajax("get","index.php",{},function(res){
var obj = JSON.parse(res);
var arr = obj.T1348647853363;
for(var i = 0; i < arr.length; i++){
console.log(arr[i].title);
}
},true);
</script>
-------------------------------------------------
index.php
<?php
$str = file_get_contents("http://c.m.163.com/nc/article/list/T1348647853363/0-20.html");
echo $str;
?>
jsonp解决跨域问题
<script type="text/javascript">
function success(res){
console.log(res);
}
</script>
<script src="http://lidongxu.applinzi.com/thejsonp.php?callback=success"
type="text/javascript" charset="utf-8"></script>
{{"name":"李四", "hobby":"那啥"}}
----------------------------------------------------
src
<?php
$cb = $_GET["callback"];
$jsonStr = '{"name":"李四", "hobby":"那啥"}';
echo "$cb({$jsonStr})";
?>
jsonp实例
<input type="text" name="name" id="search" />
<input type="submit" value="搜索" id="submit" onclick="btn()"/>
<div id="content"></div>
<script id="b"></script>
<script type="text/javascript">
var content = document.getElementById("content");
function success(res){
console.log(res);
for(var i = 0; i < res.s.length; i++){
content.innerHTML += res.s[i] + "</br>";
}
}
function btn(){
var searchInput = document.getElementById("search");
var str = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=";
str += searchInput.value;
str += "&json=1&p=3&sid=1439_21103_18560_17001_20698_22918&req=2&sc=eb&csor=0&cb=success&_=1496304074103";
var jsonScript = document.getElementById("b");
jsonScript.src = str;
}
</script>
jq之请求
<script src="js/jquery-3.0.0.js" ></script>
<script type="text/javascript">
$.ajax({
type: "POST",
url: "../01/php/3post.php",
data:{
name:"John",
address:"Boston",
sex:"男"
},
success: function(msg){
alert( "Data Saved: " + msg );
},
error:function(e){
console.log(e.statusText);
}
});
----------------------------------------------------
1.php
<?php
echo "恭喜你, 得到了我!";
?>
2get.php
<?php
$userName = $_GET["name"];
$age = $_GET["age"];
$sex = $_GET["sex"];
echo $userName.$age.$sex;
3.post.php
<?php
$userName = $_POST["name"];
$age = $_POST["address"];
$sex = $_POST["sex"];
echo $userName.$age.$sex;
?>
jq之跨域请求
<script src="js/jquery-3.0.0.js" ></script>
<script type="text/javascript">
$.ajax({
type:"get",
url:"http://lidongxu.applinzi.com/thejsonp.php",
data:{
name:"王",
mon:456,
tele:"186"
},
dataType:"jsonp",
success:function(res){
console.log(res);
},
error:function(e){
console.log(e.statusText);
}
});
</script>
JSON.parse()和JSON.stringify()
parse用于从一个字符串中解析出json对象,如
var str = '{"name":"huangxiaojian","age":"23"}'
结果:
JSON.parse(str)
Object
age: "23"
name: "huangxiaojian"
__proto__: Object
注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。
----------
stringify()用于从一个对象解析出字符串,如
var a = {a:1,b:2}
结果:JSON.stringify(a) "{"a":1,"b":2}"
php中json_decode()和json_encode()
<?php
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
var_dump(json_decode($json));
var_dump(json_decode($json, true));
?>
object(stdClass)
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
}
array(5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)
}
----------
<?php
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
echo json_encode($arr);
?>
{"a":1,"b":2,"c":3,"d":4,"e":5}
jquery ajax error函数和及其参数详细说明