Ajax JQuery,跨域名访问(jsonp)

最新推荐文章于 2022-09-06 22:32:08 发布

houyanhua1

最新推荐文章于 2022-09-06 22:32:08 发布

阅读量725

点赞数

分类专栏： Ajax JQuery JavaScript 文章标签： ajax Jquery jsonp 跨域名访问 javascript

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79703731

版权

JavaScript 同时被 3 个专栏收录

140 篇文章

订阅专栏

JQuery

57 篇文章

订阅专栏

Ajax

23 篇文章

订阅专栏

本文通过实例代码介绍了使用JQuery的Ajax实现跨域访问的方法，重点讲解了JSONP的工作原理，需要后端配合以完成跨域名的数据交互。适合前端开发者学习理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html（前端JQuery Ajax跨域名访问）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='jquery/jquery-3.0.0.min.js'></script>
</head>

<body>
<h1>区域1的页面</h1>
    <input type="button" name="" οnclick='sendAjax()' value="jquery区域请求">
</body>
</html>

<script type="text/javascript">
    // 自定义的一个函数
    function myFn(data) {
        console.log("myFn---"+data);
    }

    function sendAjax(){
        $.ajax({  //Ajax(jsonp)请求就是利用<script>标签的src属性
            url:'http://www.不同域名.com/demo.php',   // 请求不同的域名
            type:'get',   // 也可以根据需求用post
            dataType: 'jsonp',    // dataType指定为jsonp, 可以跨域名请求
            jsonpCallback:"myFn",   // 会自动在域名后拼装callback (get方式请求)  http://www.不同域名.com/demo.php?callback=myFn   
            success:function(data){   // 如果不写jsonpCallback，默认调用success方法。
                console.log(data);
            }
        })
    }
</script>

不同域名.com/demo.php（请求不同域名的服务端）：

<?php 

    $callBack = $_GET['callback'];

    $arr = array(
        'name' =>'西兰花' ,
        'color' =>'red' 
         );

    echo $callBack."(".json_encode($arr).")";   // echo myFn("{name:'西兰花',color:'red'}");

?>

demo.html（底层实现原理,需要后端配合）：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <script type="text/javascript">  
        function myFn(data){  
            console.log(data);  
        }  
    </script>  
  
    <!-- 通过script标签的src属性实现跨域名访问（所有html标签的src属性都可以跨域名访问） -->  
    <script type="text/javascript" src='http://www.不同域名.com/demo.php?callback=myFn'></script>  
  
</head>  
<body>  
    <h1>区域1的页面_jsonP演示</h1>  
</body>  
</html>