欢迎大家来到IT世界,在知识的湖畔探索吧!

介绍

介绍

我们的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);

欢迎大家来到IT世界,在知识的湖畔探索吧!

用户登录页面

我们在用户登录页面调用这个控件驱动登录表单，使登录表单可以实现提交。

Javascript

欢迎大家来到IT世界,在知识的湖畔探索吧!$(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