Question

我尝试通过XMLHttpRequest将HTML表单中的数据发送到服务器。问题是，在服务器端通过PHP我无法访问数据。

我总是以responseText的身份回来：

Anfrageerhältkeinen EntleiherLang-

Anfrageerhältkeinen StartDatum-

Anfrageerhältkeinen EndeDatum-

在发送请求后，如果我进入网络分析，我发现参数send设置为

[对象HTMLFormElement]

在我看来，这行：

var formData = new FormData();
var formData = document.querySelector("#NeueDaten");

并没有真正将表单数据转换为FormData格式。

这是HTML方面：

		<script>		
			$('#NeueDaten').submit(function(e){
				e.preventDefault();
				var xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange = function() {
					if (this.readyState == 4 && this.status == 200) {
						console.log(xhttp.responseText);
					}
				};
				xhttp.open("POST", "NeueEntleihung.php", true);
				var formData = new FormData();
				var formData = document.querySelector("#NeueDaten");
				xhttp.setRequestHeader("X-Test","test2");
				xhttp.send(formData);
				});

		</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="background-image:none;">
  <head>
    <meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/plain"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head> 
  <body style="width: 80%;padding: 5%; padding-top:0; margin:auto;">

		<form id="NeueDaten" name="foorm" action="">
			<input type="text" name="NeuerEntleiherLang">
			<input type="date" name="StartDatum" >			
			<input type="date" name="EndeDatum" >
			<input type="submit" name="SubmitButton">
		</form>

这是PHP

<?php

header("Content-type: text/HTML");

$responseText = '';
if(!isset($_POST['EntleiherLang'])) {
   $responseText = 'Anfrage erhält keinen EntleiherLang -- ';
} else {
   $responseText = "EntleiherLang: " .$_POST['EntleiherLang'] ." --" ;
}

if(!isset($_POST['StartDatum'])) {
   $responseText = $responseText.'Anfrage erhält keinen StartDatum --';
} else {
   $responseText = $responseText ."StartDatum: " .$_POST['StartDatum'] ." --" ;
}

if(!isset($_POST['EndeDatum'])) {
   $responseText = $responseText.'Anfrage erhält keinen EndeDatum -- ';
} else {
   $responseText = $responseText ."EndeDatum: " .$_POST['EndeDatum'] ." --" ;
}

header($_SERVER['SERVER_PROTOCOL'].' '.$responseStatus);
header('Content-type: text/html; charset=utf-8');
echo $responseText;

?>

Answer 1

尝试将form元素作为参数传递给FormData对象：

$('#NeueDaten').submit(function(e) {
    e.preventDefault();
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(xhttp.responseText);
        }
    };
    xhttp.open("POST", "NeueEntleihung.php", true);
    var formData = new FormData(document.querySelector("#NeueDaten"));
    xhttp.setRequestHeader("X-Test", "test2");
    xhttp.send(formData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="NeueDaten" name="foorm" action="">
<input type="text" name="NeuerEntleiherLang">
<input type="date" name="StartDatum" >			
<input type="date" name="EndeDatum" >
<input type="submit" name="SubmitButton">
</form>

您可以使用jQuery发送Ajax帖子，这样可读性强且干净

通过XMLHttpRequest发送HTML表单数据

1 个答案: