在上次的表單驗證上添加少許代碼就可以做成一個簡單留言板,本地版本意味著只能在自己電腦的瀏覽器的使用,并且頁面刷新后數據就不存在了.看一下如何實現的吧.
說明:方便起見,簡單留言板的每一條留言使用一個div表示.這只是一個比較簡單實例.用于演示JS如何添加新的元素.
1. JS實現
- 在HTML追加上表示留言板的
div
<div id="msg_board"></div>
- 在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添加新元素三步驟:
創建
設置
添加
修改提交按鈕的處理函數
btn_submit.onclick = function() {
// 如果驗證失敗返回
if (check()) {
addMsg();
}
// 返回false,禁用提交,不刷新頁面
return false;
};
實例中提交按鈕返回false,主要用于禁用提交按鈕提交數據,導致頁面刷新,數據丟失.
JS完整代碼
2. JQuery實現
- 在HTML追加上表示留言板的
div
<div id="msg_board"></div>
- 在JQuery上添加處理函數
創建一個div新元素,把文本框的值作為該元素的內容,然后把新元素添加到留言板的div中.
// 添加數據
function addMsg() {
// 創建div
var temp = $("<div>");
// 設置div文本內容
temp.html($("#txt_submit").val());
// 添加div
$("#msg_board").append(temp);
// 清空輸入框
$("#txt_submit").val("");
}
- 修改提交按鈕的處理函數
// 提交時驗證
$("#btn_submit").click(function() {
// 如果驗證失敗返回
if (check()) {
addMsg();
}
// 返回false,禁用提交,不刷新頁面
return false;
});
實例中提交按鈕返回false,主要用于禁用提交按鈕提交數據,導致頁面刷新,數據丟失.
JQuery完整代碼
JQuery處理方式與JS處理方式幾乎完全一致.
3. AngularJS實現
- 在表單驗證實例的基礎上,創建模板和控制器
var boardModule = angular.module("boardModule", []);
boardModule.controller("boardController", ["$scope", function($scope) {
// 其他代碼...
}]);
- 在HTML引入模板和控制器
<body ng-app="boardModule" ng-controller="boardController">
// 其他代碼...
</body>
- 在HTML追加上表示留言板的
div
<div>
<div ng-repeat="m in messages">{{m}}</div>
</div>
- 給提交按鈕添加單擊事件函數
<button ng-disabled="testForm.$invalid" type="submit" ng-click="addMsg()">提交</button>
- 在控制器中實現單擊事件函數
// 初始化
$scope.messages = [];
$scope.test = "";
// 添加
$scope.addMsg = function() {
// 添加數據
$scope.messages.push($scope.test);
// 清空輸入框/
$scope.test = "";
// 返回false,禁用提交,不刷新頁面
return false;
}
如有任何疑問，歡迎下面留言
