jquery ajax和jsonp 跨域传值方法

本文转载自查看原文 2020-05-12 22:09 716 ajax

因为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).')';

?>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jquery ajax跨域的完美解决方法(jsonp方式) JQuery+ajax+jsonp 跨域访问 jquery Ajax 通过jsonp的方式跨域提交表单 jquery ajax使用JSONP解决跨域问题跨域请求之jQuery的ajax jsonp的使用解惑（转） js/ajax跨域访问—jsonp的原理和实例（javascript和jquery） ajax跨域传值 AJax与Jsonp跨域访问 JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）