所以，我對 ajax 很陌生，我正在處理一個小專案，我需要從 HTML 表單中進行查詢，但由于某種原因我無法發送任何資料。我試圖通過 xmlhttprequest.send() 方法發送一個 FormData 以及一個包含值的陣列，但是我發送請求的 php 完全沒有得到任何東西。這是html檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ajax</title>
<script type="text/javascript">
function pasarXMLATabla(xml){
var empleados = xml.getElementsByTagName('empleado');
var tabla = "<table> <tr> <th>ID</th> <th>Nombres</th> <th>Apellidos</th> <th>Salario</th> </tr>";
for (var i = 0; i < empleados.length; i ) {
tabla = "<tr> <td>" empleados[i].getElementsByTagName("id")[0].innerHTML "</td>";
tabla = "<td>" empleados[i].getElementsByTagName("nombre")[0].innerHTML "</td>";
tabla = "<td>" empleados[i].getElementsByTagName("apellidos")[0].innerHTML "</td>";
tabla = "<td>" empleados[i].getElementsByTagName("salario")[0].innerHTML "</td></tr>";
}
tabla = "</table>"
document.getElementById('lista-empleados').innerHTML=tabla;
}
function manejadorDeFormulario(){
var datosDelFormulario = new FormData(document.getElementById('formulario'));
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
var respuesta = xhttp.responseXML;
pasarXMLATabla(respuesta);
console.log(respuesta.getElementsByTagName('mensaje'));
}
xhttp.open("GET","empleados.php");
xhttp.send(datosDelFormulario);
}
</script>
</head>
<body style="background-color:#9EADAD;">
<form onsubmit="manejadorDeFormulario();return false;" id='formulario' method='get'>
<select id='tipo-de-busqueda' name='tipo-de-busqueda'>
<option value=''>--Seleccione el tipo de búsqueda a realizar--</option>
<option value='1'>Salarios menores</option>
<option value='2'>Salarios iguales</option>
<option value='3'>Salarios mayores</option>
</select>
<input type="text" id='cantidad-de-salario'><br>
<button type="submit">Realizar búsqueda</button>
</form>
<div id="lista-empleados"></div>
</body>
</html>
這是php
<?php
require_once("db/query_fns.php");
$empleadosEncontrados = buscarEmpleadosPorSalario();
require_once("views/empleadosxml.php");
function buscarEmpleadosPorSalario(){
$tipoDeBusqueda = $_GET['tipo-de-busqueda'];
$cantidadDeSalario = $_GET['cantidad-de-salario'];
$result = "";
switch ($tipoDeBusqueda) {
case 1:
$sql = "SELECT * FROM empleados WHERE salario < " . $cantidadDeSalario;
$result = getElements($sql);
return $result;
break;
case 2:
$sql = "SELECT * FROM empleados WHERE salario = " . $cantidadDeSalario;
$result = getElements($sql);
return $result;
break;
case 3:
$sql = "SELECT * FROM empleados WHERE salario > " . $cantidadDeSalario;
$result = getElements($sql);
return $result;
break;
}
}
?>
/views/empleadosxml.php 檔案是我根據查詢結果構建 XML 的地方，我已經對其進行了測驗，為 $tipoDeBusqueda 和 $cantidadDeSalario 提供了特定值，除非我嘗試使用 $_GET，否則那里沒有錯誤。/db/query_fns 檔案是我進行查詢的地方，因為我可以毫無問題地生成 xml 答案，所以我可以放心地假設它正在作業。我嘗試存盤 $_GET 值，然后在新的 XML 標記中回顯 print_r 以查看我在 $_GET 中得到了什么，并且無論我使用的是 POST 還是 GET，它始終是一個空陣列。我的所有測驗都導致 $_GET 為空，因為查詢、XML 生成或決議、與服務器和資料庫的連接都沒有問題，只有當我沒有問題時才會出現問題 t 為 $cantidadDeSalario 和 $tipoDeBusqueda 提供固定值，我得到的錯誤是“檔案末尾的額外內容”。我一直在 OperaGX 和 Microsoft Edge 中嘗試所有這些，結果相同。我不能為此使用jquery。
uj5u.com熱心網友回復：
FormData 更適合POST（和PUT, PATCH）請求，而不是GET. 原因是 FormData 構造了一個包含請求資料的請求體。但是在GET請求中，即使指定了正文，服務器也可能會忽略它，瀏覽器可能會忽略它，或者可能會拋出錯誤（感謝@Phil 在評論中的更正）。
FormData 檔案對此進行了描述，但可能沒有明確說明（強調我的）：
FormData 介面提供了一種方法來輕松構造一組表示表單欄位及其值的鍵/值對，然后可以使用
fetch()orXMLHttpRequest.send()方法輕松發送。如果編碼型別設定為 ，它使用與表單相同的格式"multipart/form-data"。
關鍵是最后一句話；multipart/form-data僅適用于帶有正文的請求，例如POST.
相同檔案的下一句話澄清了一點關于做什么GET：
如果您想以使用簡單提交
URLSearchParams的方式生成查詢引數，也可以將其直接傳遞給建構式。<form>GET
URLSearchParams檔案顯示我們可以使用它來設定查詢字串，這是在 GET 請求中發送資料的正確方式；他們甚至建議我們可以使用 FormData 來簡化該字串的構造。一些搜索發現了如何做到這一點的一個很好的例子：
var parameters = new URLSearchParams(new FormData(myForm)).toString()
然后我們只需要將該查詢字串附加到您的基本 URL。
您的代碼中還有另一個問題 - FormData 僅適用于具有名稱的輸入。您的文本輸入沒有，因此它永遠不會出現在 FormData 中，也不會出現在查詢字串中，也不會出現在$_GET后端。在輸入中添加一個名稱來解決這個問題。
這是應用了這些更改和修復的代碼的簡化版本。單擊運行，然后打開瀏覽器開發工具控制臺，然后查看網路選項卡。選擇一個選項，添加一些文本，然后單擊提交。您當然會看到 404（empleados.php在 SO 上不存在），但您還會看到附加到請求的 URL 的查詢字串，并且在您的服務器上，這些值將在$_GET. 在您存在 PHP 的服務器上，它可以正常作業。
function manejadorDeFormulario(){
var datosDelFormulario = new FormData(document.getElementById('formulario'));
var parameters = new URLSearchParams(datosDelFormulario).toString();
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "empleados.php?" parameters);
xhttp.send(datosDelFormulario);
}<form onsubmit="manejadorDeFormulario();return false;" id='formulario' method='get'>
<select id='tipo-de-busqueda' name='tipo-de-busqueda'>
<option value=''>--Seleccione el tipo de búsqueda a realizar--</option>
<option value='1'>Salarios menores</option>
<option value='2'>Salarios iguales</option>
<option value='3'>Salarios mayores</option>
</select>
<input type="text" id='cantidad-de-salario' name="text"><br>
<button type="submit">Realizar búsqueda</button>
</form>uj5u.com熱心網友回復：
據我了解，您無法使用 GET 請求發送資料。如果您要發送帶有請求的內容，則必須執行以下操作：
function manejadorDeFormulario(){
var selectValue = document.querySelector("#tipo-de-busqueda").value,
inplutValue = document.querySelector("#cantidad-de-salario").value;
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
var respuesta = xhttp.responseXML;
pasarXMLATabla(respuesta);
console.log(respuesta.getElementsByTagName('mensaje'));
}
xhttp.open("GET",`empleados.php?tipo-de-busqueda=${encodeURIComponent(selectValue)}&cantidad-de-salario=${encodeURIComponent(inplutValue)}`);
xhttp.send();
}
所以上面你打開一個請求并向 $_GET 超全域可以訪問的 PHP 檔案發送一個值。
然后在 PHP 中你會做這樣的事情：
<?php
require_once("db/query_fns.php");
if (isset($_GET["tipo-de-busqueda"])) {
$empleadosEncontrados = buscarEmpleadosPorSalario($_GET);
}
require_once("views/empleadosxml.php");
function buscarEmpleadosPorSalario($request){
$tipoDeBusqueda = $request['tipo-de-busqueda'];
$cantidadDeSalario = $request['cantidad-de-salario'];
$result = "";
switch ($tipoDeBusqueda) {
case 1:
$sql = "SELECT * FROM empleados WHERE salario < " . $cantidadDeSalario;
$result = getElements($sql);
break;
case 2:
$sql = "SELECT * FROM empleados WHERE salario = " . $cantidadDeSalario;
$result = getElements($sql);
break;
case 3:
$sql = "SELECT * FROM empleados WHERE salario > " . $cantidadDeSalario;
$result = getElements($sql);
break;
}
echo $result;
}
您要確保 GET 請求針對正確的函式，以便可以回傳回應。所以我將 $_GET 包裝在 isset 函式中，并將 $_GET 引數傳遞給函式。
我希望我的回答有所幫助，我無法真正測驗您的代碼，我只能通過閱讀它來盡我所能提供建議。如果您需要更多說明，請隨時詢問。（：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/478137.html
標籤：javascript php html 阿贾克斯 表单数据