前后端数据交互方法

AppleSun 9月 29, 2016

一个网站的正常运行，是需要前端和后台通过对数据库的调用管理进行交互，下面请看数据交互的方法。

名词解释：

前端职能：前端一般是对数据库内容按照页面代码控制进行捡索并展示出来形成页面。
后台职能：主要是对数据库进行管理，增、删、改。
JSON：是JS语法的子集。
JSON语法规则：数据在名称/值对中，数据由逗号分隔，花括号保存对象，方括号保存数组

一、HTML赋值

输出到 Element 的 (value )或 (data-name)

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

渲染结果

1 2	<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 获取

1
2
3

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

优点：不占用全局变量，由 JS 自由获取。

使用建议：适合传递简单数据，以及多个简单数据与Element绑定关系。

<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赋值

将数据填充到