整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
介紹
我們的TFUMS的網(wǎng)頁模板基本上都做好了，但是大家都發(fā)現(xiàn)了我們的模板里面的表單是不能提交的，這是因?yàn)槿鄙衮?qū)動(dòng)程序，這個(gè)驅(qū)動(dòng)程序就是指Javascript代碼。
在用戶填寫完表單項(xiàng)之后，點(diǎn)擊了提交按鈕，瀏覽器會(huì)將用戶填寫的內(nèi)容組織起來發(fā)送給指定的服務(wù)器地址去處理。不過現(xiàn)如今的表單提交不再使用瀏覽器去處理了，而是使用AJAX技術(shù)去實(shí)現(xiàn)。AJAX是Asynchronous JavaScript and XML的簡(jiǎn)稱，指的是異步處理JS和XML的技術(shù)，而現(xiàn)如今AJAX處理的數(shù)據(jù)更多是JSON數(shù)據(jù)了。
福哥封裝了一個(gè)簡(jiǎn)單的jQuery控件，可以實(shí)現(xiàn)對(duì)普通表單的表單項(xiàng)目的數(shù)據(jù)采集并提交給服務(wù)器的目的。這個(gè)控件還非常簡(jiǎn)單，不要著急，我們一步一步地完善它。
Javascript
(function ($) {
var myForm = {
form : null,
opts : null,
start : function(){
this._checkOpts(this.opts);
this._bindEvent(this.form);
},
_checkOpts : function(opts){
if(opts.url == null){
throw ("There is not a valid action for form");
}
},
_bindEvent : function($form){
var ex=this;
$form.removeAttr('onsubmit');
$form.bind('submit', function (e) {
return ex._doSubmitEvent(e);
});
},
_doSubmitEvent : function(obj){
var ex=this;
form = obj.target;
$form = $(form);
opts = this.objs;
//
this._doAjax({
method: $form.attr('method'),
data: $form.serialize(),
dataType: 'json',
success: function(d){
ex._doAjaxSuccess(d, ex.opts);
},
error: function(d){
ex._doAjaxError(d, ex.opts);
}
}, this.opts);
return false;
},
_doAjax : function(opts, defOpts){
opts.url = defOpts.url;
if(opts.method == null){
opts.method = "get";
}
$.ajax(opts);
},
_doAjaxSuccess : function(d, opts){
if(opts.onSuccess){
opts.onSuccess(d);
}
},
_doAjaxError : function(d, opts){
if(opts.onError){
opts.onError(d);
}
},
init : function(form, opts){
this.form = $(form);
this.opts = opts;
}
};
myForm.init.prototype = myForm;
$.fn.form=function (options) {
var my = new myForm.init(this, options);
my.start();
};
})(jQuery);我們?cè)谟脩舻卿涰撁嬲{(diào)用這個(gè)控件驅(qū)動(dòng)登錄表單，使登錄表單可以實(shí)現(xiàn)提交。
Javascript
$(function () {
$('form').form({
url: 'user/login',
onSuccess: function (d) {
console.log('success', d);
},
onError: function (d) {
console.log('error', d);
}
});
});可以看到輸入用戶名和密碼之后點(diǎn)擊登錄按鈕，右邊的調(diào)試工具里就會(huì)有一個(gè)服務(wù)器請(qǐng)求記錄了。點(diǎn)擊服務(wù)器請(qǐng)求記錄，在Form Data里面可以看到我們?cè)诒韱卫锩嫣顚懙膬?nèi)容，就是說我們填寫的內(nèi)容已經(jīng)通過AJAX發(fā)送到服務(wù)器上去了。
今天福哥給大家展示了一個(gè)基礎(chǔ)的JQ控件form，這個(gè)控件可以實(shí)現(xiàn)將表單里的表單項(xiàng)目的數(shù)據(jù)收集起來發(fā)送給我們指定的服務(wù)器地址上了。不過，童鞋們也會(huì)發(fā)現(xiàn)一個(gè)問題，如果用戶輸入的用戶名和密碼不對(duì)怎么辦？我們?cè)趺刺崾窘o用戶呢？下一課我們將揭曉這個(gè)問題的答案。
下一課福哥將繼續(xù)完善這個(gè)JQ控件form，實(shí)現(xiàn)最簡(jiǎn)單的表單驗(yàn)證功能。
https://m.tongfu.net/home/35/blog/512913.html
、使用場(chǎng)景：
安全性都一樣，都是發(fā)送的http協(xié)議。安全性與提交文件的業(yè)務(wù)處理（格式檢測(cè)，防注入）有關(guān)，與提交方式無關(guān)。
一般登錄用表單提交，點(diǎn)擊提交觸發(fā)submit事件，一般會(huì) 使頁面發(fā)生跳轉(zhuǎn)，頁面的跳轉(zhuǎn)等行為的控制往往在后端，后端控制頁面的跳轉(zhuǎn)及數(shù)據(jù)的傳遞；但是某些時(shí)候不希望頁面跳轉(zhuǎn)，或者說想要將控制權(quán)放在前端，通過js來操作頁面的跳轉(zhuǎn)或數(shù)據(jù)變化，一般這種異步操作，都會(huì)使用ajax。
但是Ajax會(huì)有個(gè)隱藏的問題，即瀏覽器不保存密碼，不符合用戶習(xí)慣。理想的方式：建立隱藏的iframe，把form標(biāo)簽的target指向iframe，然后檢測(cè)iframe的狀態(tài)。
2、比較：
（1）ajax在提交、請(qǐng)求、接收時(shí)，都是異步進(jìn)行，網(wǎng)頁不需要刷新，只刷新頁面局部，不關(guān)心也不影響頁面其他部分的內(nèi)容。
Form提交則是新建一個(gè)頁面，哪怕是提交給自己本身的頁面，也需要刷新，為了維持頁面用戶對(duì)表單的狀態(tài)改變，要在控制器和模板之間傳遞更多參數(shù)以保持頁面狀態(tài)。
（2）ajax提交時(shí)，是在后臺(tái)新建一個(gè)請(qǐng)求。
Form卻是放棄本頁面，然后再請(qǐng)求。
（3）ajax必須要用js來實(shí)現(xiàn)，存在調(diào)試麻煩、瀏覽器兼容問題，而且不啟用js的瀏覽器，無法完成操作。
Form表單是瀏覽器自帶的，無論是否開啟js，都可以提交表單。
（4）ajax在提交、請(qǐng)求、接收時(shí)，整個(gè)過程都需要使用程序來對(duì)其進(jìn)行數(shù)據(jù)處理。
Form表單提交，是根據(jù)表單結(jié)構(gòu)自動(dòng)完成，不需要代碼干預(yù)。用submit提交。
3、其他方面：
關(guān)于輸入內(nèi)容的校驗(yàn)，ajax可以在獲取到元素內(nèi)容用程序判斷；form表單的屬性中有校驗(yàn)的字段，easyui，jeecg等中都封裝，用戶只需添加正則表達(dá)式的校驗(yàn)規(guī)則。
4、例：
（1）使用form提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="form-div">
<form id="form1" action="/users/login" method="post">
<p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="submit" value="登錄"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
</html>
nderscore.js
jQuery是DOM之王，那么underscore就是數(shù)學(xué)之王（擅長計(jì)算）。
Underscore一個(gè)JavaScript實(shí)用庫，提供了一整套函數(shù)式編程的實(shí)用功能，但是沒有擴(kuò)展任何JavaScript內(nèi)置對(duì)象。
Underscore提供了100多個(gè)函數(shù),包括常用的: map, filter, invoke 當(dāng)然還有更多專業(yè)的輔助函數(shù),
如:函數(shù)綁定, JavaScript模板功能,創(chuàng)建快速索引, 強(qiáng)類型相等測(cè)試, 等等.
Underscore不依賴環(huán)境，不限制使用場(chǎng)景，可以加載到HTML中在瀏覽器運(yùn)行，也可以中Nodejs服務(wù)器環(huán)境中使用。
封裝了一堆實(shí)用函數(shù)，這些函數(shù)基本都是針對(duì)：數(shù)組、對(duì)象、函數(shù)的。
官網(wǎng)：http://underscorejs.org/
中文文檔：
http://www.css88.com/archives/5443
CDN公共資源庫：
http://cdn.code.baidu.com/
數(shù)學(xué)運(yùn)算使用方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript">
//生成0~100的隨機(jī)數(shù)
// console.log(_.random(1,100));
//創(chuàng)建一個(gè)范圍整數(shù)數(shù)組
// console.log(_.range(1, 10)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
//取數(shù)組中的最大值和最小值
// var num = [10,5,100,2,1000]
// console.log(_.max(num))
// console.log(_.min(num))
//把數(shù)組轉(zhuǎn)成對(duì)象 {a: 10, b: 20, c: 30}
// console.log(_.object(['a','b','c'], [10,20,30]))
//each遍歷方法，對(duì)集合循環(huán)操作，可以遍歷數(shù)組、類數(shù)組arguments、JSON對(duì)象
// _.each(['小王','大王','鬼王'], function(item,index){
// console.log(item,index)
// })
//JSON遍歷
// _.each({a: 10, b: 20, c: 30}, function(item,index){
// console.log(item,index)
// })
// map可以遍歷數(shù)組、JSON對(duì)象
// var arr = _.map({a: 10, b: 20, c: 30}, function(item,index){
// return item * 2
// })
// console.log(arr)
//filter 過濾數(shù)組中符合條件的元素
// var arr = _.filter([1,2,3,4,5,6], function(item,index){
// return item % 2 == 0;
// })
// console.log(arr)
//sorby() 自定義比較方法
var arr = _.sortBy([3,4,2,1,6,88], function(item){
return Math.max(item)
})
console.log(arr)
</script>
</html>underscore模板引擎
template()方法可接受三個(gè)參數(shù)：
參數(shù)1：是必須的參數(shù)是模版字符串, 你可以通過<%= %> 來插入變量, 還可以通過<% %>來插入js代碼, 也可以通過<%- %>來進(jìn)行html轉(zhuǎn)義,
如果變量很多, 可以使用<% print() %>來簡(jiǎn)化。
參數(shù)2：是傳入模版的數(shù)據(jù), 如果不傳第二個(gè)參數(shù), 那么這個(gè)方法會(huì)返回一個(gè)模版函數(shù), 這個(gè)模版函數(shù)可以傳入數(shù)據(jù)返回完成的模版,
如果傳入data參數(shù)則會(huì)直接返回一個(gè)已完成的模版。
參數(shù)3：是設(shè)置, 比如這個(gè)方法默認(rèn)是尋找<% %>來進(jìn)行替換, 可以通過設(shè)置它來改變具體的方法。
_.template 支持以下三種模板:
<% %> 執(zhí)行一些代碼
<%= %> 在模板中打印或者說成輸出一些值
<%- %> 打印一些HTML轉(zhuǎn)義的值
解釋：
<% %> 里包裹的是一些可執(zhí)行的 JavaScript 語句，比如 if-else 語句，for 循環(huán)語句等等。
<%= %> 會(huì)打印傳入數(shù)據(jù)相應(yīng)的 key 的值，
<%- %> 和前者相比, 多了步 HTML 實(shí)體編碼的過程, 可以有效防止 XSS 攻擊。
//模板
var str = "我很<%= xinqing %>啊！買了一個(gè)<%= dongxi%>，花了<%= price%>元";
//通過move字符串生成一個(gè)數(shù)據(jù)綁定函數(shù)
var compile = _.template(str);
//數(shù)據(jù)
var obj = {
xinqing:"高興",
dongxi:"iPhone手機(jī)",
price:8888
}
//字符串和數(shù)據(jù)進(jìn)行綁定生成
str = compile(obj);
console.log(str)
underscore模板引擎Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
table,tr,td,th{
border: 1px solid #000;
border-collapse:collapse;
}
</style>
</head>
<body>
<table id="table">
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</table>
</body>
<!-- 我們使用一個(gè)故意寫錯(cuò)的type標(biāo)簽存放模板，然后讀取html內(nèi)容 -->
<script type="text/template" id="template">
<tr>
<td><%= id %></td>
<td><%= name %></td>
<td><%= age %></td>
<td><%= sex %></td>
</tr>
</script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//通過模板字符串生成一個(gè)數(shù)據(jù)綁定函數(shù)
var compile = _.template($('#template').html());
//Ajax請(qǐng)求數(shù)據(jù)
$.get('data/student.json', function(data){
// console.log(data.result)
data.result.forEach(function(obj){
//數(shù)據(jù)綁定，得到DOM字符串
var str = compile(obj)
//上樹
$('table').append(str)
})
})
</script>
</html>
data/student.json
{
"result" :[
{
"id":100001,
"name":"小明",
"age":22,
"sex":"男"
},
{
"id":100002,
"name":"小紅",
"age":22,
"sex":"女"
},
{
"id":100003,
"name":"小黑",
"age":22,
"sex":"男"
},
{
"id":100004,
"name":"小白",
"age":22,
"sex":"女"
}
]
}模板引擎的原理
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
