多ajax同时请求,返回值后覆盖掉之前的请求结果,求解答!多谢
多ajax同时请求,返回值后覆盖掉之前的请求结果,求解答!谢谢
这个是前台显示页面:
需求:下拉框选择完演出,自动显示对应时间、地点、票价(可选)信息
问题:目前是单个ajax都能显示,多个就不行了,只显示最后一个(而且是同一个位置,应该是被覆盖了),看了一些文章也找不到合适的解决方法,求各位前辈指点!
前台代码:
function load(str){
showDate(str);
showPrice(str);
}
......
<form method="post" action="insert_ecode.php" name="form1">
<div class="container">
<div class="contact-input">
<label>演出名称</label><br>
<span class="dk_wrap">
<select name="pername" class="nojs" tabindex="1" onchange="load(this.value)">
<option value="">-请选择-</option>
<?php
include("conn.php");
$codetype = $_GET["codetype"];
$sql=mysql_query("select id,pername,price,rq from perform where codetype='$codetype'");
$row=mysql_fetch_array($sql);
$id = $row["id"];
mysql_data_seek($sql,0); //指针复位
while($row=mysql_fetch_array($sql)){
?>
<option value="<?php echo $row["id"]?>"><?php echo $row["pername"]?></option>
<?php
}
?>
</select>
</span>
</div><br><br>
<div class="contact-input">
<label>演出分类</label><br>
<div class="fields">
<span class="dk_wrap">
<select name="codetype" class="nojs" tabindex="1">
<option value="<?php echo $codetype?>"><?php echo $codetype?></option>
</select>
</span>
</div>
</div><br><br>
<div class="contact-input">
<label>演出时间</label><br>
<span class="dk_wrap">
<div id="txtHintDate">时间根据演出</div>
</span>
</div><br><br>
<div class="contact-input">
<label>演出地点</label><br>
<span class="dk_wrap">
<div id="txtHintPlace">地点根据演出</div>
</span>
</div><br><br>
<div class="contact-input">
<label>票价</label><br>
<span class="dk_wrap">
<div id="txtHintPrice">票价根据演出</div>
</span>
</div><br><br>
selectdate.js 代码:
var xmlHttp
function showDate(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getdate.php"
url=url+"?id="+str
url=url+"&y="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHintDate").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
selectprice.js代码:
var xmlHttp
function showPrice(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getprice.php"
url=url+"?id="+str
url=url+"&z="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHintPrice").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
我看了http://blog.****.net/liruxing1715/article/details/7162098这篇文章,但还是不行啊,
把xmlHttp变成局部变量,然后用完delete xmlHttp; xmlHttp = null;也不行。。。
在此向各位求助,谢谢了!
------解决思路----------------------
你的状态转换函数都重名了啊,导致最后一个导入的js的stateChanged 这个函数生效。。
stateChanged 函数名起唯一来,然后xhr变量申明为内部变量,要不重用同一个变量结果会被覆盖的(IE)
修改selectdate.js 代码:
var xmlHttp
function showDate(str)
{
var xmlHttp=GetXmlHttpObject()//////变为内部变量
//.....原来的代码
xmlHttp.onreadystatechange=stateChanged1
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged1()
{
//原来的代码
function showPrice(str)
{
var xmlHttp=GetXmlHttpObject()
------解决思路----------------------
变量作用域忘记了。。将你状态转换函数放到showPrice和showPlace里面去就行了。。放在外面状态转换函数里面的xmlHttp变量访问不了
这个是前台显示页面:
需求:下拉框选择完演出,自动显示对应时间、地点、票价(可选)信息
问题:目前是单个ajax都能显示,多个就不行了,只显示最后一个(而且是同一个位置,应该是被覆盖了),看了一些文章也找不到合适的解决方法,求各位前辈指点!
前台代码:
function load(str){
showDate(str);
showPrice(str);
}
......
<form method="post" action="insert_ecode.php" name="form1">
<div class="container">
<div class="contact-input">
<label>演出名称</label><br>
<span class="dk_wrap">
<select name="pername" class="nojs" tabindex="1" onchange="load(this.value)">
<option value="">-请选择-</option>
<?php
include("conn.php");
$codetype = $_GET["codetype"];
$sql=mysql_query("select id,pername,price,rq from perform where codetype='$codetype'");
$row=mysql_fetch_array($sql);
$id = $row["id"];
mysql_data_seek($sql,0); //指针复位
while($row=mysql_fetch_array($sql)){
?>
<option value="<?php echo $row["id"]?>"><?php echo $row["pername"]?></option>
<?php
}
?>
</select>
</span>
</div><br><br>
<div class="contact-input">
<label>演出分类</label><br>
<div class="fields">
<span class="dk_wrap">
<select name="codetype" class="nojs" tabindex="1">
<option value="<?php echo $codetype?>"><?php echo $codetype?></option>
</select>
</span>
</div>
</div><br><br>
<div class="contact-input">
<label>演出时间</label><br>
<span class="dk_wrap">
<div id="txtHintDate">时间根据演出</div>
</span>
</div><br><br>
<div class="contact-input">
<label>演出地点</label><br>
<span class="dk_wrap">
<div id="txtHintPlace">地点根据演出</div>
</span>
</div><br><br>
<div class="contact-input">
<label>票价</label><br>
<span class="dk_wrap">
<div id="txtHintPrice">票价根据演出</div>
</span>
</div><br><br>
selectdate.js 代码:
var xmlHttp
function showDate(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getdate.php"
url=url+"?id="+str
url=url+"&y="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHintDate").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
selectprice.js代码:
var xmlHttp
function showPrice(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getprice.php"
url=url+"?id="+str
url=url+"&z="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHintPrice").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
我看了http://blog.****.net/liruxing1715/article/details/7162098这篇文章,但还是不行啊,
把xmlHttp变成局部变量,然后用完delete xmlHttp; xmlHttp = null;也不行。。。
在此向各位求助,谢谢了!
------解决思路----------------------
你的状态转换函数都重名了啊,导致最后一个导入的js的stateChanged 这个函数生效。。
stateChanged 函数名起唯一来,然后xhr变量申明为内部变量,要不重用同一个变量结果会被覆盖的(IE)
修改selectdate.js 代码:
var xmlHttp
function showDate(str)
{
var xmlHttp=GetXmlHttpObject()//////变为内部变量
//.....原来的代码
xmlHttp.onreadystatechange=stateChanged1
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged1()
{
//原来的代码
function showPrice(str)
{
var xmlHttp=GetXmlHttpObject()
------解决思路----------------------
变量作用域忘记了。。将你状态转换函数放到showPrice和showPlace里面去就行了。。放在外面状态转换函数里面的xmlHttp变量访问不了