通过 XMLHttpRequest 发送 HTML 表单数据

Question

I try to send data from a HTML form via XMLHttpRequest to the server.我尝试通过XMLHttpRequest将来自 HTML 表单的数据发送到服务器。 Problem is, on server side via PHP I can not access the data.问题是，在服务器端通过 PHP 我无法访问数据。

I always get back as responseText :我总是以responseText的形式返回：

Anfrage erhält keinen EntleiherLang -- Anfrage erhält keinen EntleiherLang --

Anfrage erhält keinen StartDatum -- Anfrage erhält keinen StartDatum --

Anfrage erhält keinen EndeDatum -- Anfrage erhält keinen EndeDatum --

After sending the request if I look into the network analyse I see that the parameter send is set to发送请求后，如果我查看网络分析，我看到参数 send 设置为

[object HTMLFormElement] [对象 HTMLFormElement]

To me it seems that the line:在我看来，这条线：

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

is not really putting form data into FormData format.并没有真正将表单数据转换为FormData格式。

Here is the HTML side:这是 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>

Here is PHP这是 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

Try to pass the form element as argument in the FormData object:尝试在 FormData object 中将表单元素作为参数传递：

 $('#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>

You could use jQuery to send the Ajax post, will be more readable and clean您可以使用 jQuery 发送 Ajax 帖子，将更加可读和干净

通过 XMLHttpRequest 发送 HTML 表单数据

问题描述

1 个解决方案

解决方案1
0 2019-10-30 08:18:39

通过 XMLHttpRequest 发送 HTML 表单数据

问题描述

1 个解决方案

解决方案1 0 2019-10-30 08:18:39

解决方案1
0 2019-10-30 08:18:39