使用$('form').serializeArray()，它返回一个数组:

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

另一个选项是$('form').serialize()，它返回一个字符串:

"foo=1&bar=xxx&this=hi"

看看这个jsfiddle演示

这里是一个工作的JavaScript实现，它正确地处理复选框、单选按钮和滑块(也可能是其他输入类型，但我只测试了这些)。

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

工作的例子:

function setOrPush(target, val) { var result = val; if (target) { result = [target]; result.push(val); } return result; } function getFormResults(formElement) { var formElements = formElement.elements; var formParams = {}; var i = 0; var elem = null; for (i = 0; i < formElements.length; i += 1) { elem = formElements[i]; switch (elem.type) { case 'submit': break; case 'radio': if (elem.checked) { formParams[elem.name] = elem.value; } break; case 'checkbox': if (elem.checked) { formParams[elem.name] = setOrPush(formParams[elem.name], elem.value); } break; default: formParams[elem.name] = setOrPush(formParams[elem.name], elem.value); } } return formParams; } // // Boilerplate for running the snippet/form // function ok() { var params = getFormResults(document.getElementById('main_form')); document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' '); } (function() { var main_form = document.getElementById('main_form'); main_form.addEventListener('submit', function(event) { event.preventDefault(); ok(); }, false); })(); <form id="main_form"> <div id="questions_wrapper"> <p>what is a?</p> <div> <input type="radio" required="" name="q_0" value="a" id="a_0"> <label for="a_0">a</label> <input type="radio" required="" name="q_0" value="b" id="a_1"> <label for="a_1">b</label> <input type="radio" required="" name="q_0" value="c" id="a_2"> <label for="a_2">c</label> <input type="radio" required="" name="q_0" value="d" id="a_3"> <label for="a_3">d</label> </div> <div class="question range"> <label for="a_13">A?</label> <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl"> <datalist id="q_3_dl"> <option value="0"></option> <option value="1"></option> <option value="2"></option> <option value="3"></option> <option value="4"></option> <option value="5"></option> <option value="6"></option> <option value="7"></option> <option value="8"></option> <option value="9"></option> <option value="10"></option> </datalist> </div> <p>A and/or B?</p> <div> <input type="checkbox" name="q_4" value="A" id="a_14"> <label for="a_14">A</label> <input type="checkbox" name="q_4" value="B" id="a_15"> <label for="a_15">B</label> </div> </div> <button id="btn" type="submit">OK</button> </form> <div id="results_wrapper"></div>

编辑:

如果您正在寻找一个更完整的实现，那么请查看我为其制作的项目的这一部分。我最终会用我想出的完整解决方案来更新这个问题，但也许这对某人会有帮助。

$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

它将修复问题:无法与多选择工作。

显示表单输入元素字段和输入文件提交您的表单没有页面刷新和抓取所有值与文件包括在这里

<form id="imageUploadForm" action="" method="post" enctype="multipart/form-data"> <input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" > <input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name"> <input type="number" name='phoneno' class="form-control" id="phoneno" placeholder="Phone Number"> <textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea> <input type="file" name="file" id="file" > <input type="submit" id="sub" value="Registration"> </form> on Submit button page will send ajax request to your php file. $('#imageUploadForm').on('submit',(function(e) { fname = $('#fname').val(); lname = $('#lname').val(); address = $('#address').val(); phoneno = $('#phoneno').val(); file = $('#file').val(); e.preventDefault(); var formData = new FormData(this); formData.append('file', $('#file')[0]); formData.append('fname',$('#fname').val()); formData.append('lname',$('#lname').val()); formData.append('phoneno',$('#phoneno').val()); formData.append('address',$('#address').val()); $.ajax({ type:'POST', url: "test.php", //url: '<?php echo base_url().'edit_profile/edit_profile2';?>', data:formData, cache:false, contentType: false, processData: false, success:function(data) { alert('Data with file are submitted !'); } }); }))

这将把所有表单字段附加到JavaScript对象“res”:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});