前端開發(fā)之用以處理表單的jQuery控件之AJAX請求

紹

介紹

我們的TFUMS的網(wǎng)頁模板基本上都做好了，但是大家都發(fā)現(xiàn)了我們的模板里面的表單是不能提交的，這是因為缺少驅(qū)動程序，這個驅(qū)動程序就是指Javascript代碼。

在用戶填寫完表單項之后，點擊了提交按鈕，瀏覽器會將用戶填寫的內(nèi)容組織起來發(fā)送給指定的服務器地址去處理。不過現(xiàn)如今的表單提交不再使用瀏覽器去處理了，而是使用AJAX技術去實現(xiàn)。AJAX是Asynchronous JavaScript and XML的簡稱，指的是異步處理JS和XML的技術，而現(xiàn)如今AJAX處理的數(shù)據(jù)更多是JSON數(shù)據(jù)了。

JQ的form控件

福哥封裝了一個簡單的jQuery控件，可以實現(xiàn)對普通表單的表單項目的數(shù)據(jù)采集并提交給服務器的目的。這個控件還非常簡單，不要著急，我們一步一步地完善它。

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);

用戶登錄頁面

我們在用戶登錄頁面調(diào)用這個控件驅(qū)動登錄表單，使登錄表單可以實現(xiàn)提交。

Javascript

$(function () {
    $('form').form({
        url: 'user/login',
        onSuccess: function (d) {
            console.log('success', d);
        },
        onError: function (d) {
            console.log('error', d);
        }
    });
});

可以看到輸入用戶名和密碼之后點擊登錄按鈕，右邊的調(diào)試工具里就會有一個服務器請求記錄了。點擊服務器請求記錄，在Form Data里面可以看到我們在表單里面填寫的內(nèi)容，就是說我們填寫的內(nèi)容已經(jīng)通過AJAX發(fā)送到服務器上去了。

總結(jié)

今天福哥給大家展示了一個基礎的JQ控件form，這個控件可以實現(xiàn)將表單里的表單項目的數(shù)據(jù)收集起來發(fā)送給我們指定的服務器地址上了。不過，童鞋們也會發(fā)現(xiàn)一個問題，如果用戶輸入的用戶名和密碼不對怎么辦？我們怎么提示給用戶呢？下一課我們將揭曉這個問題的答案。

下一課福哥將繼續(xù)完善這個JQ控件form，實現(xiàn)最簡單的表單驗證功能。

https://m.tongfu.net/home/35/blog/512913.html

、使用場景：

安全性都一樣，都是發(fā)送的http協(xié)議。安全性與提交文件的業(yè)務處理（格式檢測，防注入）有關，與提交方式無關。

一般登錄用表單提交，點擊提交觸發(fā)submit事件，一般會使頁面發(fā)生跳轉(zhuǎn)，頁面的跳轉(zhuǎn)等行為的控制往往在后端，后端控制頁面的跳轉(zhuǎn)及數(shù)據(jù)的傳遞；但是某些時候不希望頁面跳轉(zhuǎn)，或者說想要將控制權(quán)放在前端，通過js來操作頁面的跳轉(zhuǎn)或數(shù)據(jù)變化，一般這種異步操作，都會使用ajax。

但是Ajax會有個隱藏的問題，即瀏覽器不保存密碼，不符合用戶習慣。理想的方式：建立隱藏的iframe，把form標簽的target指向iframe，然后檢測iframe的狀態(tài)。

2、比較：

（1）ajax在提交、請求、接收時，都是異步進行，網(wǎng)頁不需要刷新，只刷新頁面局部，不關心也不影響頁面其他部分的內(nèi)容。

Form提交則是新建一個頁面，哪怕是提交給自己本身的頁面，也需要刷新，為了維持頁面用戶對表單的狀態(tài)改變，要在控制器和模板之間傳遞更多參數(shù)以保持頁面狀態(tài)。

（2）ajax提交時，是在后臺新建一個請求。

Form卻是放棄本頁面，然后再請求。

（3）ajax必須要用js來實現(xiàn)，存在調(diào)試麻煩、瀏覽器兼容問題，而且不啟用js的瀏覽器，無法完成操作。

Form表單是瀏覽器自帶的，無論是否開啟js，都可以提交表單。

（4）ajax在提交、請求、接收時，整個過程都需要使用程序來對其進行數(shù)據(jù)處理。

Form表單提交，是根據(jù)表單結(jié)構(gòu)自動完成，不需要代碼干預。用submit提交。

3、其他方面：

關于輸入內(nèi)容的校驗，ajax可以在獲取到元素內(nèi)容用程序判斷；form表單的屬性中有校驗的字段，easyui，jeecg等中都封裝，用戶只需添加正則表達式的校驗規(guī)則。

4、例：

（1）使用form提交

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>login test</title>

</head>

<body>

</form>

</div>

</body>

</html>

nderscore.js

jQuery是DOM之王，那么underscore就是數(shù)學之王（擅長計算）。

Underscore一個JavaScript實用庫，提供了一整套函數(shù)式編程的實用功能，但是沒有擴展任何JavaScript內(nèi)置對象。

Underscore提供了100多個函數(shù),包括常用的: map, filter, invoke 當然還有更多專業(yè)的輔助函數(shù),

如:函數(shù)綁定, JavaScript模板功能,創(chuàng)建快速索引, 強類型相等測試, 等等.

Underscore不依賴環(huán)境，不限制使用場景，可以加載到HTML中在瀏覽器運行，也可以中Nodejs服務器環(huán)境中使用。

封裝了一堆實用函數(shù)，這些函數(shù)基本都是針對：數(shù)組、對象、函數(shù)的。

官網(wǎng)：http://underscorejs.org/

中文文檔：

http://www.css88.com/archives/5443

CDN公共資源庫：

http://cdn.code.baidu.com/

數(shù)學運算使用方法:

<!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的隨機數(shù)
// console.log(_.random(1,100));
//創(chuàng)建一個范圍整數(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)成對象 {a: 10, b: 20, c: 30}
// console.log(_.object(['a','b','c'], [10,20,30]))
//each遍歷方法，對集合循環(huán)操作，可以遍歷數(shù)組、類數(shù)組arguments、JSON對象
// _.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對象
// 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()方法可接受三個參數(shù)：

參數(shù)1：是必須的參數(shù)是模版字符串, 你可以通過<%= %> 來插入變量, 還可以通過<% %>來插入js代碼, 也可以通過<%- %>來進行html轉(zhuǎn)義,

如果變量很多, 可以使用<% print() %>來簡化。

參數(shù)2：是傳入模版的數(shù)據(jù), 如果不傳第二個參數(shù), 那么這個方法會返回一個模版函數(shù), 這個模版函數(shù)可以傳入數(shù)據(jù)返回完成的模版,

如果傳入data參數(shù)則會直接返回一個已完成的模版。

參數(shù)3：是設置, 比如這個方法默認是尋找<% %>來進行替換, 可以通過設置它來改變具體的方法。

_.template 支持以下三種模板:

<% %> 執(zhí)行一些代碼

<%= %> 在模板中打印或者說成輸出一些值

<%- %> 打印一些HTML轉(zhuǎn)義的值

解釋：

<% %> 里包裹的是一些可執(zhí)行的 JavaScript 語句，比如 if-else 語句，for 循環(huán)語句等等。

<%= %> 會打印傳入數(shù)據(jù)相應的 key 的值，

<%- %> 和前者相比, 多了步 HTML 實體編碼的過程, 可以有效防止 XSS 攻擊。

//模板

var str = "我很<%= xinqing %>啊！買了一個<%= dongxi%>，花了<%= price%>元";

//通過move字符串生成一個數(shù)據(jù)綁定函數(shù)

var compile = _.template(str);

//數(shù)據(jù)

var obj = {

xinqing:"高興",

dongxi:"iPhone手機",

price:8888

}

//字符串和數(shù)據(jù)進行綁定生成

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>學號</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</table>
</body>
<!-- 我們使用一個故意寫錯的type標簽存放模板，然后讀取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">
//通過模板字符串生成一個數(shù)據(jù)綁定函數(shù)
var compile = _.template($('#template').html());
//Ajax請求數(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":"女"
}
]
}

模板引擎的原理

在線咨詢

上一篇：PDF怎么轉(zhuǎn)成HTML格式？有什么好用的工具？
下一篇：JavaScript字符串操作方法大全，包含ES6方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

前端開發(fā)之用以處理表單的jQuery控件之AJAX請求

紹

JQ的form控件

用戶登錄頁面

總結(jié)

您的項目需求