#php #javascript #ajax
#php #javascript #ajax
Вопрос:
у меня есть простая страница php postArticle.php с двумя выпадающими списками с категориями и подкатегориями, а подкатегории генерируются на основе категорий.
для генерации подкатегорий я использую java script, из которого я вызываю другой файл 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("*"))!=" " amp;amp; 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>
но он выдает ошибку
Ошибка типа: неопределенный является нулевым или не является объектом
проблема, которую я нахожу до сих пор, заключается в том, что data.php требуется время для отправки ответа
выполнение if(xmlHttp.readyState == 4) требует времени.
потому что, когда я добавляю операторы оповещения между кодами, это работает нормально.
что я пробовал до сих пор:
-
я попытался добавить цикл while вне условия if, но browser выдает предупреждение: скрипт замедляет работу вашей веб-страницы
-
я попытался поместить код (код для добавления repose в выпадающий список) в условие if(xmlHttp.readyState == 4), но он не дал никакого ответа.
Комментарии:
1. попробуйте добавить xmlHttp.status 200, статус 200 означает OK!
if(xmlHttp.readyState == 4 amp;amp; xmlHttp.status == 200)и «4» завершено, все данные загружены
Ответ №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'] . Но вы уже отправляете идентификатор как запрос GET в xmlHttp.open("POST","data.php?q=" id,true); , так зачем отправлять его снова с POST?
И, пожалуйста, сделайте правильный отступ в своем коде.
_
Кстати, что такое AJAX без асинхронного запуска? Javascript и XML? 😛
РЕДАКТИРОВАТЬ: Ура, мой первый «правильный ответ» 🙂
Комментарии:
1. Спасибо sawny.. это сработало, какую глупую ошибку я допустил, вызов должен всегда синхронизироваться
2. Это был бы SJAX: синхронный javascript и xml. Не совсем так броско, и из-за этого ‘comet’ не имеет особого смысла в качестве имени.