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的使用解惑（轉） js/ajax跨域訪問—jsonp的原理和實例（javascript和jquery） jquery ajax 跨域 Jquery版Ajax利用JSONP 跨域POST/GET傳輸數據研究 JQuery Ajax 跨域請求 jQuery ajax 302跨域 JQUERY的AJAX中 get()、post()的跨域方法解釋一下jQuery的$.getJSON跨域Ajax方法