Question

我想在提交之前测试连接。与that solution不同，我使用非Jquery解决方案（因为我不想使用该语言，我认为没有必要加载库）。

代码在测试连接和发送或不发送表单时都能正常工作。

问题似乎是在formTemp.submit()中使用xhr.onreadystatechange，请在没有输入的情况下发送表单。

以下是我的工作：

//Test connection on form
var myForm = document.getElementsByTagName('form');
for (var i = 0 ; i <myForm.length; i++){
	(function(){
		var currentI = i;
		addEvent(myForm[currentI],'submit', function(e) {
			e = e || window.event; //In case IE
			e.preventDefault(); //Prevent the Form to be sent
			TestConnection_js(this);
		});
	})();
}

function addEvent(element, event, func){ 
	if (element.addEventListener){
		element.addEventListener(event, func, false);
	} else { //In case IE
		element.attachEvent('on'+event, func);
	}
}

var TestConnection_js = function (formTemp){
	var xhr = new XMLHttpRequest();
	xhr.open('GET', './index.php');
	xhr.onreadystatechange = function(){
		console.log(xhr.readyState+' - '+xhr.status);
		if (xhr.readyState == 4 && xhr.status == 200) {
			formTemp.submit(); //Here is my Submit (that submit nothing)
		} else {
			alert('Connection Error');
		}
	};
	xhr.send(null);
	return xhr;
}

<!-- What's on page : here.php -->
<form action="aim.php" method="post">
  <input type="submit"  value="Aim" />
</form>

<!-- What's on page : aim.php -->
<?php print_r ($_GET);
      print_r ($_POST); ?>

我猜最终在aim.php上的事实意味着成功测试，所以你能告诉我这里有什么问题吗？

编辑：忘记表单上的method="post"，但这不是问题。

Answer 1

<强>问题：
1。 TestConnection_js功能发出 GET 请求，因此print_r($_POST);中没有任何数据 2。 ajax请求是index.php而不是aim.php（xhr.open('GET', './index.php');）的。 3。 ajax请求未发送任何数据，因此即使print_r($_GET);也没有数据
4. 如果您要发送 POST 请求，我认为这是您想要的，您必须序列化表单并向{{1}发出POST ajax请求文件

<强>解决方案：
1。我建议你使用一个javascript框架（比如jQuery）来完成你想要的大部分代码并且代码是跨浏览器兼容的。看看jQuery ajax POST requests 另外，请看一下example of jQuery POST request with the form data 2。使用浏览器中集成的开发者工具。对于Firefox，我首选的工具是Firebug。通过这种方式，您可以准确地看到浏览器正在发出的每个请求以及正在发送/接收的数据。

使用form.submit（）清空带有表单的$ _GET和$ _POST

1 个答案: