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

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

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

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

看看这个jsfiddle演示

基于neuront的响应，我创建了一个简单的JQuery方法，在键值对中获取表单数据，但它适用于多选择和name='example[]'的数组输入。

下面是它的用法:

var form_data = $("#form").getFormObject();

您可以在下面找到它的定义及其工作方式的示例。

// Function start $.fn.getFormObject = function() { var object = $(this).serializeArray().reduce(function(obj, item) { var name = item.name.replace("[]", ""); if ( typeof obj[name] !== "undefined" ) { if ( !Array.isArray(obj[name]) ) { obj[name] = [ obj[name], item.value ]; } else { obj[name].push(item.value); } } else { obj[name] = item.value; } return obj; }, {}); return object; } // Function ends // This is how it's used $("#getObject").click( function() { var form_data = $("#form").getFormObject(); console.log(form_data); }); /* Only to make view better ;) */ #getObject { padding: 10px; cursor:pointer; background:#0098EE; color:white; display:inline-block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <form id="form"> <input type="text" name="text" value="Hola amigo" /> <input type="text" name="text_array[]" value="Array 1" /> <input type="text" name="text_array[]" value="Array 2" /> <input type="text" name="text_array[]" value="Array 3" /> <select name="multiselect" multiple> <option name="option1" selected> option 1 </option> <option name="option2" selected> option 2 </option> </select> <input type="checkbox" name="checkbox" value="checkbox1" checked/> <input type="checkbox" name="checkbox" value="checkbox2" checked/> <input type="radio" name="radio" value="radio1" checked/> <input type="radio" name="radio" value="radio2"/> </form> <div id="getObject"> Get object (check the console!) </div>

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

<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 !'); } }); }))

我用这个:

jQuery插件

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML表单

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

获取数据

var myData = $("#myForm").getFormData();

我有点惊讶，因为下面没有人提到解决方案。

通过document.forms.namedItem函数获取表单数据

var form = document.forms.namedItem("fileinfo");

form.addEventListener('submit', function(ev) {
   var oData = new FormData(form);
}

HT的

<form name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

这里有一个非常简单和简短的解决方案，甚至不需要Jquery。

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;