php+JavaScript 实现前后端JSON交互(GET or POST)

php+JavaScript 实现前后端JSON交互(GET or POST)


DATA: 2018年05月21日 20:52:57

注:jsonp方式可解决跨域访问的问题,即:读者将前端代码copy至本地,可以发现笔者服务器提供的json接口依然是可用的。

有兴趣可到下面链接在开发者模式下体会交互过程。
http://www.yixzm.cn/public_api_view/json_server_html

前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
    <p>callback:</p><div id="divCallBackJson"></div>
    <p>post:</p><div id="divPostJson"></div>

    <script type="text/javascript">

function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCallBackJson').innerHTML = html;
}
//<!-- post 方式 -->
function postJson()
{
    var msgJson = '{"mainElements":["main_1","main_2"],"tipElements":["tip_1"],"subElements":["sub-1"]}';
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById('divPostJson').innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","/public_api_json/post_json",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("msgJson="+msgJson);
    console.log(msgJson="+msgJson");
}


postJson();

</script>
<!-- jsonp 方式 -->
<script type="text/javascript" src="http://www.yixzm.cn/public_api_json/callback_json?jsoncallback=callbackFunction"></script>
</body>
</html>

后端代码

public function callback_json()
{
    header('Content-type: application/json');
    //获取回调函数名
    $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
    //json数据
    $json_data = '["jsondata1","jsondata2"]';
    //输出jsonp格式的数据
    echo $jsoncallback . "(" . $json_data . ")";
}

public function post_json()
{
    $json_data = NULL;
    
    if (isset($_POST['msgJson'])) {
        $json_data = $_POST['msgJson'];
    }
    echo $json_data;
}
版权声明

弈心博客


本文首发site_name,转载请附上博文链接!