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

jQueryAJAX的$.ajax()用jsonp解决跨域问题

2016-08-11 20:42 429 查看

在以前的$.ajax()的跨域解决办法是：先访问本地服务器，在本地服务器中再访问到远程服务器。

可是呢！大家有没有觉得那种办法会在性能上稍有欠缺呢，会不会造成资源成本的浪费呢！？

接下来，我要用的是jsonp解决跨域访问服务器的方式。

一、html中写js进行访问。注：引入jQuery的库

<html>
<head>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
</head>
<body>
<button id="send">get/post JSON</button>
<p id="result"></p>
<script>
$(function () {
$('#send').click(function () {
//jsonp解决跨域(访问远程服务器)问题
$.ajax({
//url:"http://服务器地址：端口号/服务器文件路径
//服务器地址要注意是ipv4的，ipv6测试暂时没成功。
url: "http://192.168.191.7:8989/phpProject/crossDomain
/jsonServer.php",
//get/post都可以的请求方式
type: "POST",
//是否同步，false为异步加载
async: false,
//设置返回数据类型jsonp
dataType: "jsonp",
//jsonp的字段，服务器返回的前缀要和这个一样
jsonp: "jsoncallback",
//data: {name:"Lily"},
success: function (json) {
//装在获取的数据
var newstr = '';
//json为获取的数据，记得给服务器设置charset=utf-8;否则返回中文乱码
$.each(json, function (i, v) {
//json把数据给了v
newstr = newstr + " " + v.name;
});
//把得到的所有name字段都加入#result
$("#result").append(newstr);
},
error: function () {
//访问出错弹出
alert('fail');
}
});
});
});
</script>
</body>
</html>

二、服务器：jsonServer.php

<?php
/**
* Created by PhpStorm.
* User: 洋   汪
* Date: 2016/8/10
* Time: 20:32
*/
header("Content-type:text/html;charset=utf-8");

//htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体。
//获取回调函数名
$jsoncallback = isset($_REQUEST['jsoncallback']) ?
htmlspecialchars($_REQUEST['jsoncallback']) : '';

//json数据
$jsonData = '[{name:"汪洋"},{name:"wangyang"}]';

//输出json数据
echo $jsoncallback . "(" . $jsonData . ")";
?>

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

标签： jsonp 服务器性能库 jQuery库

相关文章推荐

新的分享

章节导航