从 HTML 表单中检索输入作为 URL答案

【问题标题】：Retrieve Inputs from HTML Form as URL从 HTML 表单中检索输入作为 URL
【发布时间】：2018-08-15 04:18:08
【问题描述】：

基于 w3schools 教程 (https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit)，下面的表单将按以下格式提交其输入：firstname=Mickey&lastname=Mouse。有没有办法使用 javascript 或 JQuery 提取这种格式的输入？谢谢！

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

【问题讨论】：

标签： javascript jquery forms get

【解决方案1】：

您可以使用jQuery 获取它：

$('form').serializeArray();

【讨论】：

【解决方案2】：

为了将输入字段值发送到 URL，您必须使用 JavaScript 将所有字段值收集到 FormData 或 Array 中。然后您可以将该变量发送到 URL 中的下一页

检查一下：

function getFieldArray()
{
	console.log('Example : 1	Get all fields in FormData Array');
	var formData = new FormData();
	var elements = document.getElementById("myForm1").elements;
	for (var i = 0, element; element = elements[i++];) {
		if (element.type === "text")
		{
			console.log('This is textbox id = ' + element.id + ', Value = ' + element.value);
			formData.append(element.id, element.value);
		}
	}
	
	//Example : 1  END
	console.log('\n-----------------------------\n\n');
	
	
	console.log('Example : 2	Get all fields in Array');
	var fieldsArr = [];
	var frmElements = document.getElementById("myForm1").elements;
	for (var i = 0, element; element = frmElements[i++];) {
		if (element.type === "text")
		{
			fieldsArr[i] = element.value;
		}
	}
	console.log('Fields Length : ' + fieldsArr.length);

	return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm1">
		First name:<br>
		<input id="firstname" type="text" name="firstname" value="Mickey">
		<br>
		Last name:<br>
		<input id="lastname" type="text" name="lastname" value="Mouse">
		<br><br>
		<button onclick="return getFieldArray()">Submit</button>
	</form>

稍后您可以将 FormData 发送到另一个页面。

$.ajax({
    type: "POST",
    url: 'new_page.html',
    data: formData,
    processData: false,
    contentType: false,
    dataType: 'html',
    success: function (response) {
        //alert('done')
    },
    error: function (error) {
        //alert('fail');
    }
});

【讨论】：

【解决方案3】：

serializeArray() 函数将为您提供您在表单中提交的所有数据，只需在表单上调用该函数即可。

【讨论】：