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

紹

介紹

我們的TFUMS的網頁模板基本上都做好了，但是大家都發現了我們的模板里面的表單是不能提交的，這是因為缺少驅動程序，這個驅動程序就是指Javascript代碼。

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

JQ的form控件

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

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

用戶登錄頁面

我們在用戶登錄頁面調用這個控件驅動登錄表單，使登錄表單可以實現提交。

Javascript

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

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

總結

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

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

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

、使用場景：

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

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

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

2、比較：

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

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

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

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

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

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

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

Form表單提交，是根據表單結構自動完成，不需要代碼干預。用submit提交。

3、其他方面：

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

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就是數學之王（擅長計算）。

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

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

如:函數綁定, JavaScript模板功能,創建快速索引, 強類型相等測試, 等等.

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

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

官網：http://underscorejs.org/

中文文檔：

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

CDN公共資源庫：

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

數學運算使用方法:

<!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的隨機數
// console.log(_.random(1,100));
//創建一個范圍整數數組
// console.log(_.range(1, 10)); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
//取數組中的最大值和最小值
// var num = [10,5,100,2,1000]
// console.log(_.max(num))
// console.log(_.min(num))
//把數組轉成對象 {a: 10, b: 20, c: 30}
// console.log(_.object(['a','b','c'], [10,20,30]))
//each遍歷方法，對集合循環操作，可以遍歷數組、類數組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可以遍歷數組、JSON對象
// var arr = _.map({a: 10, b: 20, c: 30}, function(item,index){
// return item * 2
// })
// console.log(arr)
//filter 過濾數組中符合條件的元素
// 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()方法可接受三個參數：

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

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

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

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

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

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

<% %> 執行一些代碼

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

<%- %> 打印一些HTML轉義的值

解釋：

<% %> 里包裹的是一些可執行的 JavaScript 語句，比如 if-else 語句，for 循環語句等等。

<%= %> 會打印傳入數據相應的 key 的值，

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

//模板

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

//通過move字符串生成一個數據綁定函數

var compile = _.template(str);

//數據

var obj = {

xinqing:"高興",

dongxi:"iPhone手機",

price:8888

}

//字符串和數據進行綁定生成

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內容 -->
<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">
//通過模板字符串生成一個數據綁定函數
var compile = _.template($('#template').html());
//Ajax請求數據
$.get('data/student.json', function(data){
// console.log(data.result)
data.result.forEach(function(obj){
//數據綁定，得到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怎么轉成HTML格式？有什么好用的工具？
下一篇：JavaScript字符串操作方法大全，包含ES6方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

紹

JQ的form控件

用戶登錄頁面

總結

您的項目需求