Question

我有一个简单的php页面postArticle.php，带有两个下拉列表，类别和子类别以及子类别根据类别生成。

用于生成子类别我正在使用java脚本从中调用另一个php文件（data.php）

代码postarticle.php是

<!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>
<script type="text/javascript">
            function getSubCategories(l1,l2)
            {
                var response;
                var xmlHttp;
                if(l1.selectedIndex>=1)
                    {
                        try{
                            var id=document.getElementById('listCategory').value;
                        //alert("hello "+id);
                        l2.disabled=false;
                        if (window.XMLHttpRequest)
                        {// code for IE7+, Firefox, Chrome, Opera, Safari
                          var xmlHttp=new XMLHttpRequest();
                        }
                        else
                        {// code for IE6, IE5
                           var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        //alert("hello 1");
                        xmlHttp.open("POST","data.php?q="+id,true);
                        //alert("id passed is : " +id);
                        xmlHttp.onreadystatechange =  function(){
                        //alert("inside fn1");          

                        if (xmlHttp.readyState == 4)
                        {
                        //alert("inside if fun");                       
                        //alert(xmlHttp.responseXML.getElementsByTagName("div")[0]);
                        //alert("response text : "+xmlHttp.responseText);
                        response=xmlHttp.responseText;
                        }

                        //alert("inside fn2");
                        }

                        //alert("hello 3");
                        xmlHttp.send("data.jsp?q="+id);
                        //alert('hello 4');

                        var resArray=new Array();
                        //alert('hello 5');
                        response=response.replace(/^\s+|\s+$/g,"");
                         resArray=response.split("#");
                        //alert('hello 6');
                        //alert("response array : "+resArray);
                        for(x in resArray)
                            {
                                //alert(resArray[x].substring(0, resArray[x].indexOf("*")));
                                //alert(resArray[x].substring(resArray[x].indexOf("*")+1));
                                if(resArray[x].substring(0, resArray[x].indexOf("*"))!=" " && resArray[x].substring(resArray[x].indexOf("*")+1)!="")
                                    {
                                var OptNew = document.createElement('option');
                                OptNew.text = resArray[x].substring(resArray[x].indexOf("*")+1);
                                OptNew.value = resArray[x].substring(0, resArray[x].indexOf("*"));
                                try
                                  {
                                    //for IE earlier than version 8
                                    l2.add(OptNew,l2.options[null]);
                                  }
                                catch (e)
                                  {
                                    l2.add(option,null);
                                  }
                                    }
                            }
            }catch(e){alert(e.toString());}
                    }
                    else
                        {
                            return;
                        }


                var newOpt = new Option(selText[i], selValues[i]);
                theSel.options[i] = newOpt;

            }
        </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table border="1" width="100%">
            <tr id="header" >
                <td height="30%" width="100%" colspan="3">
<?php include("Header.php"); ?>
                </td>
            </tr>
            <tr id="body">
                <td height="65%" width="15%" valign="center">
                    <table width="100%">
                        <tr><td>
<?php include("LeftPanel.php"); ?>
                    </td>
                    </tr>
                    </table>
                </td>
                <td height="65%" width="75%" valign="center">
                        <form method="post" action="PostArticle_Back.php">
                        Title: <input type="text" name="txtTitle" id="txtTitle">
                        <br>
                        Content : <textarea id="txtContent" name="txtContent" rows="5" cols="50"></textarea>
                        <br>
                        <p>select Category :</p>
                        <select id="listCategory" name="listCategory" onchange="getSubCategories(listCategory,listSubCategory)">
                            <option value="0">Select Category</option>
                            <?php
                                $con=mysql_connect("localhost","root","");
                                if(!$con)
                                {
                                    die('Could not connect: ' . mysql_error());
                                }       
                                mysql_select_db("articles_db",$con);
                                $result = mysql_query("select CATEGORY_ID, CATEGORY_NAME from TBL_CATEGORIES");

                                while($row = mysql_fetch_array($result))
                                  {
                             ?>
                           <option value="<?php  echo $row['CATEGORY_ID'] ; ?>" > <?php  echo $row['CATEGORY_NAME'] ; ?>
                                </option>
                                <?php } ?>

                        </select>

                        <br>
                        <p>select SubCategory :</p>
                        <select id="listSubCategory" name="listSubCategory" disabled="true">
                            <option value="0">select Subcategory</option>
                        </select><br>
                        <input type="submit" value="Post Article"/>
                    </form>
                </td>
                <td height="65%" width="10%" valign="center">
                    Right panel
                </td>
            </tr>
            <tr id="footer">
                <td height="5%" colspan="3">
                    Footer
                </td>
            </tr>
        </table>
</body>
</html>

但它会引发错误 TypeError：undefined为null或不是对象

我现在发现的问题是data.php需要时间来发送响应

if（xmlHttp.readyState == 4）需要时间来执行。

因为当我在代码之间添加警告语句时，它可以正常工作。

我到现在为止所做的尝试：

我试图在条件外添加while循环但是broweser会发出警告： 脚本使您的网页变得缓慢
我试图将if（xmlHttp.readyState == 4）条件中的代码（用于添加repose的代码放在下拉列表中）但是它没有给出任何响应。

Answer 1

提示1

我真的没有得到你的问题，但如果你需要等待获得价值，你可以使用Async=false。

xmlHttp.open("POST", "data.php?q="+ id, false);

然后你不需要xmlHttp.onreadystatechange = function(){ ... }，代码将等待响应，其余的Javascript将停止执行，直到获取响应为止。

提示2

如果您仍然希望其他Javascript代码执行(Async = true)，则可以输入

               var resArray=new Array();
                //alert('hello 5');
                response=response.replace(/^\s+|\s+$/g,"");
                 resArray=response.split("#");
                 ...more code...

                            }
                    }

在xmlHttp.readyState == 4区块中。

               if (xmlHttp.readyState == 4)
                {
                     response=xmlHttp.responseText;
                     //Put the code here
                }

我这样做了。

其他事项

为什么使用“POST”？你不发送任何POST数据。如果您想要抓取xmlHttp.send("data.jsp?q="+id);，xmlHttp.send("q="+id);应为$_POST['q']。但是你已经在xmlHttp.open("POST","data.php?q="+id,true);中发送了像GET请求一样的id，那么为什么要用POST再次发送它？

请正确缩进您的代码。

_

顺便说一句，什么是没有异步的AJAX？ Javascript和XML？：P

修改是的，我的第一个“正确答案”：）

从javascript抛出错误调用DB

1 个答案:

提示1

提示2

其他事项