AJAX and JSONP implement cross-domain requests in PHP-PHP Tutorial-php.cn

AJAX and JSONP implement cross-domain requests in PHP

小云云

Release： 2023-03-21 07:06:02

Original

2696 people have browsed it

Before I wrote "A simple example of php returning json data", "php returns json data Chinese display problem" and "Using JSON in PHP language and restoring json to an array". Hope it helps everyone.

Example 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>

Copy after login

ajax.js

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

Copy after login

ajax.php

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

Copy after login

jquery-1.5 .2.min.js

Download it yourself

When using jsonp, when calling a function in JSONP form, such as "myurl?callback=?" jQuery will automatically replace ? with The correct function name to execute the callback function.

Example 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>

Copy after login

ajax.js

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

Copy after login

ajax.php

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

Copy after login

jquery-1.5.2. min.js

Download it yourself from the Internet

Related recommendations:

js cross-domain request service instance analysis

Ajax front-end and back-end cross-domain request processing methods

Vue uses axios cross-domain request data examples detailed explanation

The above is the detailed content of AJAX and JSONP implement cross-domain requests in PHP. For more information, please follow other related articles on the PHP Chinese website!