在Ajax响应中执行JavaScript

时间：2013-01-20 18:57:22

标签： php javascript jquery ajax

我有一个ajax表单进程。但是当我点击一个函数时，我会执行此过程。当我单击它时，在Jquery对话框中打开一个PHP表单。但是当我处理表单时，POST VAR是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。

2 个答案:

答案 0 :(得分：0)

嗯，不知道确切的问题是什么，但是快速检查你的代码这里有两件事：

  1. 您未正确关闭输入标记，例如：

     echo '<tr><td class="forms">ICAO:</td><td><input type="text" id="icao" name="icao" size="30" value=';
echo $row["ICAO"] . "/></td></tr>";// <--- notice the added forward slash to close the input

  2. 您没有使用value围绕""属性：

     echo '<tr><td class="forms">ICAO:</td><td><input type="text" id="icao" name="icao" size="30" value="'; //<-- open here
echo $row["ICAO"] . '"/></td></tr>'; //<--- notice the closing "

答案 1 :(得分：0)

在XML中，片段标识符的类型为ID，每个元素只能有一个ID类型的属性。因此，在XHTML 1.0中，id属性被定义为ID类型。为了确保XHTML 1.0文档是结构良好的XML文档。

在这种情况下，您将数据循环到相同的输入ID。将您的代码更改为：

var i = 1;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){

echo '<tr><td class="forms">ICAO:</td><td><input type="text" id="icao_' . i . '" name="icao" size="30" value="';
echo $row["ICAO"] . '"></td></tr>"';

echo '<tr><td class="forms">Name:</td><td><input type="text" id="name_' . i . '" name="name" size="30" value="';
echo $row["Name"] . '"></td></tr>"';

echo '<tr><td class="forms">Weight Empty:</td><td><input type="text" id="weightempty_' . i . '" name="weightempty" size="30" value="';
echo $row["WeightEmpty"] . '"></td></tr>"';

echo '<tr><td class="forms">Weight Full:</td><td><input type="text" id="weightfull_' . i . '" name="weightfull" size="30" value="';
echo $row["WeightFull"] . '"></td></tr>"';

echo '<tr><td class="forms">Cargo Full:</td><td><input type="text" id="cargofull_' . i . '" name="cargofull" size="30" value="';
echo $row["CargoFull"] . '"></td></tr>"';

echo '<tr><td class="forms">Cruise Speed:</td><td><input type="text" id="cruisespeed_' . i . '" name="cruisespeed" size="30" value="';
echo $row["CruiseSpeed"] . '"></td></tr>"';

echo '<tr><td class="forms">Range:</td><td><input type="text" id="range_' . i . '" name="range" size="30" value="';
echo $row["Range"] . '"></td></tr>"';

echo '<tr><td class="forms">Price:</td><td><input type="text" id="price_' . i . '" 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_' . i . '" 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_' . i . '" 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_' . i . '" name="economyclassseats" size="30" value="';
echo $row["EconomyClassSeats"] . '"></td></tr>"';}

echo '<tr><td><input id="editaircraft_' . i . '" type="submit" value="Edit Aircraft"></td></tr>';
i++;
}

然后您可以使用jquery serialize

发送数据

改变这个：

ajax.send("icao="+icao+"&name="+name+"&weightempty="+weightempty+"&weightfull="+weightfull+"&cargofull="+cargofull+"&cruisespeed="+cruisespeed+"&range="+range+"&price="+price+"&firstclassseats="+firstclassseats+"&businessclassseats="+businessclassseats+"&economyclassseats="+economyclassseats);

进入这个：

ajax.send($("form").serialize());
相关问题
最新问题