zoukankan      html  css  js  c++  java
  • PHP AJAX JSONP实现跨域请求使用实例

    在之前我写过“php返回json数据简单实例”,“php返回json数据中文显示的问题”和“在PHP语言中使用JSON和将json还原成数组”。有兴趣的童鞋可以看看

    今天我写的是PHP AJAX JSONP使用的实例。不清楚jsonp是什么的请自己搜索

    实例1

    test.html

       
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="jquery-1.5.2.min.js"></script>
    <script src="ajax.js"></script>
    </head>
     
    <body>
    </body>
    </html>

     ajax.js

       
    $.ajax({
        type : "post",
        url : "ajax.php",
        dataType : "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
        success : function(json){
            alert('success');
        },
        error:function(){
            alert('fail');
        }
    });

     ajax.php

       
    <?php
     
    $data = ".......";
    $callback = $_GET['callback'];
    echo $callback.'('.json_encode($data).')';
    exit;
     
    ?>

     jquery-1.5.2.min.js

    自己上网下载

    当使用jsonp时,使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

     

    实例2

    test.html

       
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="jquery-1.5.2.min.js"></script>
    <script src="ajax.js"></script>
    </head>
     
    <body>
    <form name="form">
    <input type="text" name="sex">
    <input type="text" name="age">
    <input type="button" id="btn" value="button" />
    </form>
    </body>
    </html>

     ajax.js
       
    $(document).ready(function(){
     
        $("#btn").click(function(k) {
            //...
            var j = $("form").serializeArray();//序列化name/value
            $.ajax({
                type: 'GET',  //这里用GET
                url: 'ajax.php',
                dataType: 'jsonp',  //类型
                data: j,
                jsonp: 'callback', //jsonp回调参数,必需
                async: false,
                success: function(result) {//返回的json数据
                    alert(result.message); //回调输出
                    
                    result = result || {};
                    if (result.msg=='err'){
                        alert(result.info);
                    }else if (result.msg=="ok"){
                        alert('提交成功');
                    }else{
                        alert('提交失败');
                    }
                    
                },
                timeout: 3000
            })
            //...
        });
        
    });

     ajax.php

       
    <?php
    $callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数,必需
    $date = array("age"=>$_GET['age'], "message"=>$_GET['age']);
    $date["msg"]="err";
    $date["info"]="因人品问题,发送失败";
    $tmp= json_encode($date); //json 数据
    echo $callback . '(' . $tmp .')';  //返回格式,必需
    ?>

     jquery-1.5.2.min.js

    在之前我写过“php返回json数据简单实例”,“php返回json数据中文显示的问题”和“在PHP语言中使用JSON和将json还原成数组”。有兴趣的童鞋可以看看

    今天我写的是PHP AJAX JSONP使用的实例。不清楚jsonp是什么的请自己搜索

    实例1

    test.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="jquery-1.5.2.min.js"></script>
    <script src="ajax.js"></script>
    </head>
     
    <body>
    </body>
    </html>

     ajax.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $.ajax({
        type : "post",
        url : "ajax.php",
        dataType : "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
        success : function(json){
            alert('success');
        },
        error:function(){
            alert('fail');
        }
    });

     ajax.php

    1
    2
    3
    4
    5
    6
    7
    8
    <?php
     
    $data = ".......";
    $callback = $_GET['callback'];
    echo $callback.'('.json_encode($data).')';
    exit;
     
    ?>

     jquery-1.5.2.min.js

    自己上网下载

    当使用jsonp时,使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。


    实例2

    test.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="jquery-1.5.2.min.js"></script>
    <script src="ajax.js"></script>
    </head>
     
    <body>
    <form name="form">
    <input type="text" name="sex">
    <input type="text" name="age">
    <input type="button" id="btn" value="button" />
    </form>
    </body>
    </html>

     ajax.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    $(document).ready(function(){
     
        $("#btn").click(function(k) {
            //...
            var j = $("form").serializeArray();//序列化name/value
            $.ajax({
                type: 'GET'//这里用GET
                url: 'ajax.php',
                dataType: 'jsonp'//类型
                data: j,
                jsonp: 'callback', //jsonp回调参数,必需
                async: false,
                success: function(result) {//返回的json数据
                    alert(result.message); //回调输出
                     
                    result = result || {};
                    if (result.msg=='err'){
                        alert(result.info);
                    }else if (result.msg=="ok"){
                        alert('提交成功');
                    }else{
                        alert('提交失败');
                    }
                     
                },
                timeout: 3000
            })
            //...
        });
         
    });

     ajax.php

    1
    2
    3
    4
    5
    6
    7
    8
    <?php
    $callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数,必需
    $date = array("age"=>$_GET['age'], "message"=>$_GET['age']);
    $date["msg"]="err";
    $date["info"]="因人品问题,发送失败";
    $tmp= json_encode($date); //json 数据
    echo $callback . '(' . $tmp .')'//返回格式,必需
    ?>

     jquery-1.5.2.min.js

  • 相关阅读:
    (七)mysql 记录长度
    (六)列类型
    (五)校对集
    (四)中文数据问题
    Spring Boot Jpa 的使用
    Spring Boot:如何优雅的使用 Mybatis
    Spring Boot:定时任务
    Spring Boot 小技巧
    【重磅】Spring Boot 2.0权威发布
    Spring Boot + Jpa + Thymeleaf 增删改查示例
  • 原文地址:https://www.cnblogs.com/whowhere/p/9232802.html
Copyright © 2011-2022 走看看