前后端数据交互方法

常用的前后端数据交互方法

• HTML赋值
• JS赋值
• script填充JSON
• AJAX获取JSON
• WebSocket实时传输数据

---

HTML赋值

• 输出到 element 的 value 或 data-name

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

• 使用JS获取

$('input').val();
$('div').val();

• 优点：不占用全局变量，由JS自由获取
• 使用建议：适合传递简单数据。

$('span').on('click', function(){
    $.post('/ajax/remove/', $(this).data('userid'), function(data){...})
})

---

JS赋值

• 将数据填充到 script 的js变量声明中

<script>
    var user_avatar = '<?php echo $user_avatar;?>'
</script>

• 优点：传输数据非常方便。前端直接调用 user_avatar 变量使用数据
• 缺点：为了传递一个字符串数据占用了全局变量 user_avatar 。当有很多数据需要传输时则会占用很多全局变量。
• 如果返回数据存在换行将会导致JS报错
• 优化：可以通过指向某一个变量存放所有后端返回的内容，最小程度占用全局变量

// php代码
var SERVER_DATA = {
    username: {$username},
    userid: {$userid},
    title: {$title}
}

• 使用建议：需要最快速度传递数据给JS并十分确定次数据稳定时，使用此方法。当数据格式复杂的建议使用script填充JSON或AJAX获取JSON方法。

---

script填充JSON

• JSON语法
  
  • 填充JSON数据到<script> 标签中，前端通过DOM获取JSON字符串并解析成对象

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

• 优点：页面加载完成后就可以获取到数据。不占用全局变量，可传递大量数据集合。
• 缺点：数据量特别大时会导致页面初次加载变慢。变慢不只是文件大小导致，也因为服务器查询数据并返回合集需要时间，可使用AJAX获取JSON完成按需加载和加载等待。
• 使用建议：适合传递在DOM加载完成时就需要用到的大量数据集合。

---

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){
        $('#info').html('username'+oData.username+'<br>userid: '+oData.userid);
})
})