jqury ajax跨域请求的两种方法
09/02
jqury ajax跨域请求的两种方法
第一种，jsonp的方法
直接上代码，前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试登录</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div>
<p>异步登录</p>
<input type="text" name="username" value=""/>
<input type="text" name="pwd" value=""/>
<select name="type" >
<option value="login">登录</option>
<option value="logout">退出</option>
<option value="reg">注册</option>
</select>
<button onclick="send();">登录</button>
</div>
<script>
function send(){
var types = $('select:optional[name="type"]').val();
var userName = $('input:text[name="username"]').val();
var pwd = $('input:text[name="pwd"]').val();
var hash = '<?php echo $hash;?>';
$.ajax({
url : 'http://localhost/renren/api/remote_login.php',
type : 'POST',
data : {'hash' : 'hash','user_name':userName,'pwd':pwd,'type':types},
dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'ajax_callback', //设置回调函数名
success:function(res){
console.log(res)
}
})
}
</script>
</body>
</html>后台PHP代码：
$callBack = trim($_GET['callback']);
$data = array(1,2,3,4,5,'a'=>8989);
$res = $callback .'('.json_encode($data).')';
exit( $res );第二种，ajax跨域模式，php需要加header头，前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试登录</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div>
<p>异步登录</p>
<input type="text" name="username" value=""/>
<input type="text" name="pwd" value=""/>
<select name="type" >
<option value="login">登录</option>
<option value="logout">退出</option>
<option value="reg">注册</option>
</select>
<button onclick="send();">登录</button>
</div>
<script>
function send(){
var types = $('select:optional[name="type"]').val();
var userName = $('input:text[name="username"]').val();
var pwd = $('input:text[name="pwd"]').val();
var hash = '<?php echo $hash;?>';
$.ajax({
url : 'http://localhost/renren/api/remote_login.php',
type : 'POST',
data : {'hash' : 'hash','user_name':userName,'pwd':pwd,'type':types},
crossDomain: true, //这里一定要设置
dataType:'json',
success:function(res){
console.log(res)
}
})
}
</script>
</body>
</html>后端代码，这里是php演示的：
//跨域post请求 header 头 这个不能少
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');
$data = array(1,2,3,4,5,'a'=>8989);
$res = json_encode($data);
exit( $res ); //像普通的返回json就行了
版权属于：
Dcr163的博客
本文链接：
http://dcr163.cn/169.html（转载时请注明本文出处及文章链接）
哟呵，上班还有空更新，还写那么多，是不是工作量不饱和
