jsonp跨域请求示例

/**
原生js写法
跨域注意点:
服务端返回数据格式为 return 'callback('.json_encode($data,JSON_UNESCAPED_UNICODE).')';
此时js端自定义回调函数即可获得返回的数据
*/
function search(){
	var name = document.getElementsByName('sear')[0].value;
	if(name != ''){
		name = '/name/' + name;
	}
	var url = 'http://www.buydong.com/index.php/Index/index/search' + name;
	var src = document.createElement('script');
	src.setAttribute('type','text/javascript');
	src.setAttribute('src',url);
	document.getElementsByTagName('head')[0].appendChild(src);
}
var content = document.getElementById('content');
function callback(res){
	console.log(res);
	var str = '';
	for (var i in res) {
		str += '<p>'+res[i]['goods_id']+res[i]['goods_name']+'</p>';
	}
	content.innerHTML = str;
}



/**
ajax写法:
跨域注意点:
服务端返回数据为 return 'showData('.json_encode($data,JSON_UNESCAPED_UNICODE).')';
此时js端自定义回调函数即可获得返回的数据
*/
function search(){
	var name = document.getElementsByName('sear')[0].value;
	if(name != ''){
		name = '/name/' + name;
	}
	var url = 'http://tp5131.buydong113.com/index.php/Index/index/search' + name;

	$.ajax({
    	url: url,
     	type: "GET",
     	dataType: "jsonp",  //指定服务器返回的数据类型
     	jsonp: "theFunction",   //指定参数名称
     	jsonpCallback: "showData",  //指定回调函数名称
     	success: function (data) {
         	console.info("调用success");
         	console.log(data);
     	}
 	});

}
//回调函数
function showData (data) {
	console.info("调用showData");

	var str = '';
	for (var i in data) {
		str += '<p>'+data[i]['goods_id']+data[i]['goods_name']+'</p>';
	}
	$("#content").html(str);
}

猜你喜欢

转载自blog.csdn.net/dawnsmile113/article/details/86491892
今日推荐