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

末蓝、 2022-09-25 03:23 261阅读 0赞

在以前的$.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 . ")";
    ?>