用于检索 AJAX 表单提交脚本的所有表单元素值的 jQuery/Javascript 代码答案

【问题标题】：jQuery/Javascript code to retrieve values of all form elements for AJAX form submission script用于检索 AJAX 表单提交脚本的所有表单元素值的 jQuery/Javascript 代码
【发布时间】：2011-09-22 17:07:35
【问题描述】：

我正在构建一个 javascript 来使用 jQuery 自动提交一个 html 表单。我想知道是否有可能创建一个javascript方法，如果给定一个标识符来查找表单，它将返回所有表单元素和值的映射。我宁愿使用这样的方法，也不愿为每个表单元素手动指定 jQuery 选择器。

function form_submit(){
    jQuery.ajax({  
        type: 'post',  
        url: '/signup/',  
        data: map_form_elements_values('my_form'),  
        success: function(data, textStatus, jqXHR){
                        //foo
                 }
    });  
    return false; 
}

<form id="my_form" action="">
<input class="" id="name" type="text" name="last-name" />
<select class="" id="fruit" type="select" name="fruit-name" />
<option>bananas</option>
</select>
</form>

目标是让map_form_elements_values('my_form') 返回一个可供ajax 函数使用的映射。有谁知道怎么做？

【问题讨论】：

看看.serializeArray() - api.jquery.com/serializeArray
我希望我在回答中正确理解了您的问题，但如果没有，请告诉我。

标签： jquery html ajax forms jquery-selectors

【解决方案1】：

看看jQuery表单插件：http://jquery.malsup.com/form/

如果您不需要额外的功能，那么一个简单的语句如下：

 myData = $("#formToSubmit").serialize();

        $.ajax({
        type: "POST",
        url: "process_form.php",
        data: myData,
        dataType: "json",
        success: function(data) { ....etc

【讨论】：

谢谢！那个插件看起来很有用，我想我会尝试使用它！

【解决方案2】：

我最近回答了这个问题：

JQuery. How to load inputs values to an array?

jQuery.fn.inputs2obj=function (){
        var out={};
        var arr=this.filter(':input').each(function () {
    e=$(this);
        out[e.attr('name')]=e.val();
        }).get();
        return out;
    }

使用示例：

inputs=$('form').find(:input).inputs2obj();

【讨论】：

这与这个问题有什么关系？
jQuery.ajax({ type: 'post', url: '/signup/', data: $('#myform').find(:input).inputs2obj(); 成功: 函数(data, textStatus, jqXHR){ //foo } });返回假； }

【解决方案3】：

您可以使用serialize() 或serializeArray()

var params = $("#my_form").serialize();
        $.post( "/signup/",params,
                 function(data,textStatus, jqXHR){foo ... } )

参见示例

http://api.jquery.com/serialize/

【讨论】：