前端开发之用以处理表单的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控件

用户登录页面

总结

您的项目需求