jquery ajax和jsonp 跨域传值方法

 

因为HTTP出于安全考虑，ajax是不允许跨域访问的，不过跨域通过scrip的src传递参数访问。js原生方法看我ajax下的文章。

因为jQuery已经封装好了，我们直接传递参数就可以了。

HTML页面，有两个按钮一个普通方法，dataType:HTML，也可以传递HTML代码。

其中jsonp 和 jsonpCallback 参数都是可加可不加的。如果不加，服务器端的方法名就一点要写callback

复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax</title>
</head>
<body>
<input type="button" value="点击" id="btn">
<input type="button" value="点击" id="btn2">
<div id="showInfo"></div>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
    $(function(){

        $("#btn").click(function(){
            $.ajax({
                url:"01jquery.php",//一个用来包含发送请求的URL字符串。
                dataType:"script",//放回值的类型，可以是HTML，text，json....
                type:"get",
                success:function(data){//请求成功后的回调函数
                    // $("#showInfo").html(data)
                    data;              
                },
                error:function(e){
                    console.log(e);
                }
            });
        });
        
        $("#btn2").click(function(){
            $.ajax({
                url:"02jquery.php",//一个用来包含发送请求的URL字符串。
                dataType:"jsonp",//返回值的类型
                type:"get",
                data:{citycode:123,flag:"abc"},//传递的值                
                jsonp: "cb",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback,都不加参数为 callback=jQuery121.....)
                //jsonpCallback:"myfun",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(都加参数cb=myfun)
                success:function(data){//请求成功后的回调函数
                    // console.log(data[1])
                    $.each(data,function(i,el){                    
                        var op = $("<li>"+i+">>>"+el+"</li>")
                        $("#showInfo").append(op);
                    });
                },
                error:function(e){
                    console.log(1);
                    console.log(e);
                }
            });
        });
     
    });

</script>
</body>
</html>
复制代码
01jquery
<?php
// 可以放字符串、HTML标签、JavaScript、只不过ajax的dataType值修改一下就可以了
//$tag ="hello ajax";
//$tag = '<div>水果</div><div>水果</div><div>水果</div><div>水果</div><div>水果</div><div>水果</div><div>水果</div><div>水果</div>';
$tag = 'alert(123);';
echo $tag;

?>
02jquery
复制代码
<?php
$citycode= $_GET['citycode'];
$flag= $_GET['flag'];
$callback = $_GET['cb'];////如果ajax页面的jsonp 参数不填。我们就写这个格式 $callback = $_GET['callback'];

$arr=array($citycode,$flag,"BMW");

echo $callback.'('.json_encode($arr).')';

?>
复制代码

 

posted @   三线码工  阅读(1027)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示