我有一个ajax表单过程。但是当我单击一个功能时，我会执行此过程。当我单击它时，它会在 Jquery 对话框中打开一个 PHP 表单。但是当我处理表单时，POST VARs 是 NULL。
这是代码：
具有请求表单功能的主文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aircrafts</title>
<link rel="stylesheet" type="text/css" href="../../../lib/css/style.css">
<link rel="stylesheet" href="../../../lib/css/flick/jquery.ui.all.css">
<script src="../../../lib/js/jquery.js"></script>
<script src="../../../lib/js/ui/jquery.ui.button.js"></script>
<script src="../../../lib/js/ui/jquery.ui.core.js"></script>
<script src="../../../lib/js/ui/jquery.ui.widget.js"></script>
<script src="../../../lib/js/ui/jquery.ui.mouse.js"></script>
<script src="../../../lib/js/ui/jquery.ui.button.js"></script>
<script src="../../../lib/js/ui/jquery.ui.draggable.js"></script>
<script src="../../../lib/js/ui/jquery.ui.position.js"></script>
<script src="../../../lib/js/ui/jquery.ui.resizable.js"></script>
<script src="../../../lib/js/ui/jquery.ui.dialog.js"></script>
<script>
$(function() {
$( "#loadingdialog" ).dialog({
autoOpen: false,
width: 300,
height: 65
});
$("#loadingdialog").dialog('widget').find(".ui-dialog-titlebar").hide();
$("#loadingdialog").dialog('widget').find(".ui-resizable-se").hide();
$( "#editaircraftdialog" ).dialog({
autoOpen: false,
width: 425
});
$("#editaircraftdialog").dialog('widget').find(".ui-resizable-se").hide();
});
if (window.XMLHttpRequest)
{
ajax=new XMLHttpRequest();
}
else
{
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
function edit(str) {
$.ajax({
url: "./edit_aircraft.php?icao="+str,
context: document.body,
success: function(responseText) {
$("#editaircraftdialog").html(responseText);
$("#editaircraftdialog").find("script").each(function(i) {
eval($(this).text());
});
$("#editaircraftdialog").dialog('open');
}
});
};
</script>
</head>
<body>
<div id="result"></div></br>
<div id="loadingdialog"><center><p><img src="../../../lib/images/loading.gif"></center></p></div>
<div id="editaircraftdialog"></div>
<?php
require_once('../../config.php');
$query = "SELECT * FROM aircrafts ORDER BY ICAO ASC LIMIT";
$result = mysql_query($query);
if (!$result)
{
die (mysql_error());
}
echo "<table border='0' cellspacing='0'>";
echo "<tr><th class=tabletitles>ICAO</th><th class=tabletitles>Edit</th></tr>";
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
if($i++%2==0){
$color="#FFFFFF";
}else{
$color="#CCCCCC";
}
?>
<tr bgcolor='<?php echo $color; ?>' onmouseover="this.style.background='#ABFB04';" onmouseout="this.style.background='<?php echo $color; ?>';">
<?php
echo "<td class=tablelist>";
echo $row["ICAO"] . '</td><td class=tablelist>';
echo "<img src=\"../../../lib/images/edit.png\" onclick=\"edit('".$row["ICAO"]."')\"></td><td class=tablelist>";
}
echo "</table>";
mysql_close();
?>
</body>
</html>
带有 AJAX 表单流程和 PHP 表单的文件：
<?php
require_once ('../../config.php');
$icao = $_GET["icao"];
$query = "SELECT * FROM aircrafts WHERE ICAO = '$icao'";
$result = mysql_query($query);
if (!$result)
{
die (mysql_error());
}
?>
<form action="javascript:editForm();" method="post" enctype="application/x-www-form-urlencoded">
<?php
echo '<table border="0">';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
echo '<tr><td class="forms">ICAO:</td><td><input type="text" id="icao" name="icao" size="30" value=';
echo $row["ICAO"] . "></td></tr>";
echo '<tr><td class="forms">Name:</td><td><input type="text" id="name" name="name" size="30" value=';
echo $row["Name"] . "></td></tr>";
echo '<tr><td class="forms">Weight Empty:</td><td><input type="text" id="weightempty" name="weightempty" size="30" value=';
echo $row["WeightEmpty"] . "></td></tr>";
echo '<tr><td class="forms">Weight Full:</td><td><input type="text" id="weightfull" name="weightfull" size="30" value=';
echo $row["WeightFull"] . "></td></tr>";
echo '<tr><td class="forms">Cargo Full:</td><td><input type="text" id="cargofull" name="cargofull" size="30" value=';
echo $row["CargoFull"] . "></td></tr>";
echo '<tr><td class="forms">Cruise Speed:</td><td><input type="text" id="cruisespeed" name="cruisespeed" size="30" value=';
echo $row["CruiseSpeed"] . "></td></tr>";
echo '<tr><td class="forms">Range:</td><td><input type="text" id="range" name="range" size="30" value=';
echo $row["Range"] . "></td></tr>";
echo '<tr><td class="forms">Price:</td><td><input type="text" id="price" name="price" size="30" value=';
echo $row["Price"] . "></td></tr>";
if($row["FirstClassSeats"] != NULL && $row["FirstClassSeats"] != 0){
echo '<tr><td class="forms">First Class Seats:</td><td><input type="text" id="firstclassseats" name="firstclassseats" size="30" value=';
echo $row["FirstClassSeats"] . "></td></tr>";}
if($row["BusinessClassSeats"] != NULL && $row["BusinessClassSeats"] != 0){
echo '<tr><td class="forms">Business Class Seats:</td><td><input type="text" id="businessclassseats" name="businessclassseats" size="30" value=';
echo $row["BusinessClassSeats"] . "></td></tr>";}
if($row["EconomyClassSeats"] != NULL && $row["EconomyClassSeats"] != 0){
echo '<tr><td class="forms">Economy Class Seats:</td><td><input type="text" id="economyclassseats" name="economyclassseats" size="30" value=';
echo $row["EconomyClassSeats"] . "></td></tr>";}
echo '<tr><td><input id="editaircraft" type="submit" value="Edit Aircraft"></td></tr>';
}
echo "</table>";
?>
</form>
<script>
$(function() {
$("#editaircraft")
.button()
.click(function editForm() {
});
});
function editForm(){
var icao = document.getElementById('icao').value;
var name = document.getElementById('name').value;
var weightempty = document.getElementById('weightempty').value;
var weightfull = document.getElementById('weightfull').value;
var cargofull = document.getElementById('cargofull').value;
var cruisespeed = document.getElementById('cruisespeed').value;
var range = document.getElementById('range').value;
var price = document.getElementById('price').value;
var firstclassseats = document.getElementById('firstclassseats').value;
var businessclassseats = document.getElementById('businessclassseats').value;
var economyclassseats = document.getElementById('economyclassseats').value;
ajax.open("POST","edit_aircraft_process.php",true);
ajax.onreadystatechange=function(){
if(ajax.readyState==4)
{
refreshTable(function(){$("#loadingdialog").dialog('close');});
refreshTable(function(){$("#result").fadeIn(); document.getElementById("result").innerHTML=ajax.responseText;});
setTimeout(function() { $("#result").fadeOut() }, 5000);
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("icao="+icao+"&name="+name+"&weightempty="+weightempty+"&weightfull="+weightfull+"&cargofull="+cargofull+"&cruisespeed="+cruisespeed+"&range="+range+"&price="+price+"&firstclassseats="+firstclassseats+"&businessclassseats="+businessclassseats+"&economyclassseats="+economyclassseats);
$("#editaircraftdialog").dialog('close');
$("#loadingdialog").dialog('open');
}
</script>
当我执行 editForm 时，可以正常工作并将过程的结果<div id="result">很好地处理。但是，发送到数据库中编辑的变量（例如 icao）是 NULL 并且它什么也不编辑。
我认为错误是因为在 ajax 请求之后它不能执行document.getElementById.