JQuery跨域请求实践

最新推荐文章于 2021-02-12 17:00:17 发布

海阳之新

最新推荐文章于 2021-02-12 17:00:17 发布

阅读量473

点赞数 2

分类专栏： HTML5 PHP 文章标签： JQuery跨域请求

本文链接：https://blog.csdn.net/vsiryxm/article/details/50268319

版权

PHP 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

HTML5

20 篇文章 0 订阅

订阅专栏

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

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

缺点：只支持get请求

模板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":[]}');	
	}
}

海阳之新

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery跨域请求实践

在做公司项目时，遇到跨域请求问题，例如：a.domain.com子域名请求domain.com主域名程序的问题，通常在JS里是不支持跨域请求的，但从JQuery1.2后getJSON方法支持跨域读取json数据，原理是利用一个叫做jsonp的概念。下面是实践内容，留作后用。jsonp的概念：个人理解是在前端代码里取一个回调函数名称作为参数传递到服务端，服务端用这个回调函数名将处理结果包裹起来，...
复制链接

扫一扫