先後端數據交互方法

時間 2019-11-08

標籤後端數據交互方法简体版

原文原文鏈接

在此介紹幾種經常使用的先後端數據交互方法，並給出使用建議。以提升先後端協同開發的效率。
此文章適合先後端協同開發經驗不足的新手閱讀。javascript

目錄:php

HTML賦值

輸出到 Element 的 value 或 data-namecss

<input type="hidden" value="<?php echo $user_avatar;?>" />
<div data-value="<?php echo $user_avatar;?>"></div>

渲染結果html

<input type="hidden" value="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40" />
<div data-avatar="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40"></div>

使用 JS 獲取前端

$('input').val();
// http://jquery.bootcss.com/jQuery.data/
$('div').data('avatar');

優勢：
不佔用全局變量，由 JS 自由獲取。java

使用建議：jquery

適合傳遞簡單數據，也很是適合多個簡單數據與 Element 綁定關係。git

<ul>
<li>nimojs <span data-userid="1" >刪除</span></li>
<li>nimo22 <span data-userid="2" >刪除</span></li>
<li>nimo33 <span data-userid="3" >刪除</span></li>
<li>nimo44 <span data-userid="4" >刪除</span></li>
<li>nimo55 <span data-userid="5" >刪除</span></li>
</ul>
<script>
$('span').on('click',function(){
    $.post('/ajax/remove/',$(this).data('userid'),function(data){
        // ...
    })
})
</script>

JS賦值

將數據填充到 <script> 的 JavaScript 變量聲明中。github

<script>
var user_avatar = "<?php echo $user_avatar;?>";
// 渲染結果
// var user_avatar = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";
</script>

或使用 Smarty 後端模板引擎：web

<script>
var user_avatar = "{$user_avatar}";
</script>

優勢：
傳遞數據很是方便。前端直接調用 user_avatar 變量使用數據。

缺點：

爲了傳遞一個字符串數據佔用了全局變量 user_avatar，當有不少數據須要傳輸時則會佔用不少全局變量。
若是返回數據存在換行將會致使JS報錯

// 渲染結果有換行符
var user_id = "

https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";
// Uncaught SyntaxError: Unexpected token ILLEGAL

優化：
能夠經過指向的某一個變量存放全部後端返回的內容，最小程度佔用全局變量。例：

// PHP 代碼
var SERVER_DATA = {
    username: {$username},
    userid: {$userid},
    title: {$title}
}
// 渲染結果
var SERVER_DATA = {
    username: "NimoChu",
    userid: 1,
    title: 'F2E'
}

使用建議：
須要最快速度傳遞數據給 JS 並十分肯定此數據穩定時，使用此方式。數據格式複雜的建議使用script填充JSON 或AJAX獲取JSON 方法。

script填充JSON

什麼是JSON？

填充 JSON 數據到 <script> 標籤中，前端經過 DOM 獲取 JSON字符串並解析成對象。

<script type="text/template" id="data">{"username":"nimojs","userid":1}</script>
<script>
var data = JSON.parse($('#data').html());
//{username:"nimojs",userid:1}
</script>

優勢：
頁面加載完成後就能夠獲取到數據。不佔用全局變量，可傳遞大量數據集合。

缺點：
數據量特別大時會致使頁面初次加載變慢。變慢並不僅是文件大小致使的，也由於服務器查詢數據並返回合集是須要時間，可以使用AJAX獲取JSON完成按需加載和加載等待。

使用建議：
適合傳遞在DOM加載完成時就須要用到的大量數據集合。例如：前端控制頁面渲染，後端將JSON數據源填充到 <script> 由前端使用 JavaScript模板引擎進行頁面渲染。

AJAX獲取JSON

使用 AJAX 獲取JSON數據

<span id="showdata">查看資料</span>
<div style="display:none;" id="box">
    <h2>用戶信息</h2>
    <p id="info"><img src="loading.gif" /></p>
</div>

$('#showdata').on('click',function(){
    $('#box').show();
    $.getJSON('/ajax/userdata/',function(oData){
        // oData = {"username":"nimojs","userid":1}
        $('#info').html('用戶名：' + oData.username + '<br>用戶ID：' + oData.userid);
    })
})

這是一個經過AJAX 獲取用戶資料的示例。流程以下：