javascript - 动态创建表单并提交

Question

所以我在下面写了一个 jQuery 插件，在 plugin.js 中。我希望每次创建表单时都能够通过 JSON/AJAX 提交表单。

(function ( $ ) {
    $.fn.create = function() {
        var form = '<div id="form" class="container">';
        form += '<div>User Login</div>';
        form += '<form action="/create/one" method="post">';
        form += '<input type="text" name="name" placeholder="name">';
        form += '<input type="email" name="email" placeholder="email">';
        form += '<button type="submit">Login</button>';
        form += '</form>';
        form += '</div>';
        $('#form').submit(function(e)
        {

            var postData = form.find('form').serializeArray();
        if(postData.name === "someREGEXstring" || postData.email === "someREGEXstring") {
        console.log("empty inputs not cool");   
        }
    var formURL = $('form').attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {

        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
        }
    });
    e.preventDefault(); //STOP default action
});

$('#form').submit(); //SUBMIT FORM

        return this.append(form);
    };
}( jQuery ));

在 HTML View 中

<div id="newForm"></div>

<script>
$(document).ready(function(){
    $("#newForm").create(); 
});
</script>

这是做这个的正确方法还是我应该:

1. 在同一文件下为 AJAX 部分创建另一个命名空间
2. 在 AJAX 部分的不同文件下创建另一个命名空间

Answer 1

如果问题纯粹是关于如何安排代码，我建议您将表单模板完全从代码中抽离出来，让您的插件更加灵活。

• 选项 1. 在页面中创建表单作为模板并传递模板选择器作为选项插件
• 选项 2:将模板传递给您的插件

这是第一种技术的示例:http://jsfiddle.net/TrueBlueAussie/c8bmw/7/

HTML 模板:

<script id="template" type="template">
    <div id="form" class="container">
        <div>User Login</div>
        <form action="/create/one" method="post"/>
            <input type="text" name="name" placeholder="name"/>
            <input type="email" name="email" placeholder="email"/>
            <button type="submit">Login</button>
        </form>
    </div>
</script>

创建方式:

$(document.body).create('#template');

插件简化为:

(function ( $ ) {
    $.fn.create = function(template) {
        form = $($(template).text());
        form.submit(function(e) {
            // This is the actual form object now
            var $form = $(this).find('form');
            // Test contents of form here

            // If values are correct proceed with Ajax call
            var postData = $form.serializeArray();
            var formURL = $form.attr("action");
            $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR) 
                {

                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                }
            });
            e.preventDefault(); // Stop default action
        });
        return this.append(form);
    };
}( jQuery ));

现在您的插件代码将适用于任何形式。

根据您的评论，我已经删除了表单的自动提交，因为那没有意义