您的位置：首页 > Web前端 > JQuery

JQuery跨域请求实践

2015-12-11 20:41 721 查看

在做公司项目时，遇到跨域请求问题，例如：a.domain.com子域名请求domain.com主域名程序的问题，通常在JS里是不支持跨域请求的，但从JQuery1.2后getJSON方法支持跨域读取json数据，原理是利用一个叫做jsonp的概念。下面是实践内容，留作后用。

jsonp的概念：个人理解是在前端代码里取一个回调函数名称作为参数传递到服务端，服务端用这个回调函数名将处理结果包裹起来，一起打包响应到前台，前台再调用这个回调函数处理后面的事情。

模板test.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery跨域请求测试</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
<input type="button" id="btnTest" value="发送测试" />

<script>
$('#btnTest').on("click",function(){ sendMessage(); });

//第一种写法  *****推荐*****
function sendMessage(){
$.getJSON('http://www.ju3ban.com/test/sendMessage?mobile=13777777777&callback=?', //这里的callback=?很关键，规定这么写
function(data) {
alert(data.msg);
});
}

//第二种写法
function sendMessage2(){
$.ajax({
type:"POST",
cache: false,
url:"http://www.ju3ban.com/test/sendMessage",
data:{mobile:'13777777777'},
dataType:'jsonp',
jsonpCallback:'sendCallBack' //这里设置回调函数名称，必须与下面的函数名称保持一致
});
}

function sendCallBack(data){
alert('是：'+data.msg);
}
</script>
</body>
</html>

Test类的控制器与方法：

<?php

class Test extends CI_controller
{
public function __construct()
{
parent::__construct();
$this->data = array();
$this->load->helper('base');
}
public function index(){
$this->load->view('test.html',$this->data);
}
public function sendMessage(){
$mobile = $this->input->get('mobile');     //无论前面第一种还是第二种方法，跨域请求最终都是以get的形式提交数据
$callback = $this->input->post('callback'); //此参数名根据前端传过来的为准,Jquery会传递过来
if(! empty($callback)){
exit($callback.'({"status":1,"msg":"'.$mobile.'success!","data":[]})');
}
exit('{"status":1,"msg":"'.$mobile.'success!","data":[]}');
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航