堆栈内存溢出
  繁体   English   中英

在Ajax响应中执行JavaScript

[英]Executing JavaScript in an Ajax Response

 原文  2013-01-20 18:57:21  6   2    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 个解决方案

解决方案1
 0  2013-01-20 19:13:51

好吧，不确定确切的问题是什么，但是在快速检查代码时，有两件事：

  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 "

解决方案2
 0  2013-01-20 19:37:06

在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());

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在AJAX响应中执行JavaScript-Codeigniter HTML ajax响应不执行javascript函数 执行从AJAX响应（PHP）返回的javascript函数 <script> tags not executing in ajax response Ajax对javascript数组的响应 Javascript无法在AJAX响应中使用 Javascript AJAX POST回应 Ajax，在javascript中处理php响应 在Ajax响应中查找使用Javascript的元素 JavaScript（Ajax）未显示php响应
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM