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 @ 2020-05-12 22:09  三线码工  阅读(999)  评论(0)  编辑  收藏  举报