简单留言板(本地版本)-1-添加数据

在上次的表单验证上添加少许代码就可以做成一个简单留言板,本地版本意味着只能在自己电脑的浏览器的使用,并且页面刷新后数据就不存在了.看一下如何实现的吧.

说明:方便起见,简单留言板的每一条留言使用一个div表示.这只是一个比较简单实例.用于演示JS如何添加新的元素.

1. JS实现

1. 在HTML追加上表示留言板的div

2. 在JS上添加处理函数
   创建一个div新元素,把文本框的值作为该元素的内容,然后把新元素添加到留言板的div中.

// 添加数据
            function addMsg() {
                // 创建div
                var temp = document.createElement("div");

                // 设置div文本内容
                temp.innerHTML = txt_submit.value;

                // 添加div
                msg_board.appendChild(temp);

                // 清空输入框
                txt_submit.value = "";
            }

JS添加新元素三步骤:

1. 创建

2. 设置

3. 添加

4. 修改提交按钮的处理函数

btn_submit.onclick = function() {
                // 如果验证失败返回
                if (check()) {
                    addMsg();
                }

                // 返回false,禁用提交,不刷新页面
                return false;
            };

实例中提交按钮返回false,主要用于禁用提交按钮提交数据,导致页面刷新,数据丢失.
JS完整代码

2. JQuery实现

1. 在HTML追加上表示留言板的div

2. 在JQuery上添加处理函数
   创建一个div新元素,把文本框的值作为该元素的内容,然后把新元素添加到留言板的div中.

// 添加数据
            function addMsg() {
                // 创建div
                var temp = $("
");
                // 设置div文本内容
                temp.html($("#txt_submit").val());
                // 添加div
                $("#msg_board").append(temp);
                // 清空输入框
                $("#txt_submit").val("");
            }

3. 修改提交按钮的处理函数

// 提交时验证
            $("#btn_submit").click(function() {
                // 如果验证失败返回
                if (check()) {
                    addMsg();
                }

                // 返回false,禁用提交,不刷新页面
                return false;

            });

实例中提交按钮返回false,主要用于禁用提交按钮提交数据,导致页面刷新,数据丢失.
JQuery完整代码

JQuery处理方式与JS处理方式几乎完全一致.

3. AngularJS实现

1. 在表单验证实例的基础上,创建模板和控制器

var boardModule = angular.module("boardModule", []);
boardModule.controller("boardController", ["$scope", function($scope) {
// 其他代码...
}]);

2. 在HTML引入模板和控制器

  // 其他代码...

3. 在HTML追加上表示留言板的div

    

        
{{m}}
    

4. 给提交按钮添加单击事件函数

提交

5. 在控制器中实现单击事件函数

// 初始化
            $scope.messages = [];
            $scope.test = "";

            // 添加
            $scope.addMsg = function() {

                // 添加数据
                $scope.messages.push($scope.test);

                // 清空输入框/
                $scope.test = "";

                // 返回false,禁用提交,不刷新页面
                return false;
            }

AngularJS完整代码

---

如有任何疑问，欢迎下面留言