ajax,如何使用一个ajax请求更改两个div?

时间:2013-09-22 15:18:57

标签: javascript php jquery html ajax

如何使用一个ajax请求更改2个div?

Ajax的update.php

<?php
include("config.inc.php");
include("user.inc.php");
$id = $_GET['id'];
$item = New item($id);
$result = $item->iteminfo;
echo $result->name."<br />";
unset($item); 
?> 

HTML:

<tr>
<td> (one) </td>

<td><input type="text" value="" onchange="showUser<?php echo $x;?>(this.value)"  style="width:70px;"/></td>

<td><span id="txtHint<?php echo $x;?>"></span></td>

<td><input type="text" value="" name="price_<?php echo $x;?>" id="price_<?php echo $x;?>"  onchange="upperCase<?php echo $x+$h;?>()" style="width:40px;"/></td>

<td><input type="text"  id="proce_<?php echo $x;?>" style="width:70px;" value="<?php echo $x+$h;?>" disabled /></td>

<td><input type="text" value="" name="price_<?php echo $x;?>"   style="width:40px;"/></td>

<td><input type='text' id="totalPrice<?php echo $x;?>" disabled /></td>

</tr>

脚本:

function showUser<?php echo $x;?>(str)
{
if (str=="")
  {
  document.getElementById("txtHint<?php echo $x;?>").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint<?php echo $x;?>").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax-update.php?id="+str,true);
xmlhttp.send();
}

我的问题是,当我更改此值

<td><input type="text" value="" onchange="showUser<?php echo $x;?>(this.value)"  style="width:70px;"/></td>

不仅仅是这个td

<td><span id="txtHint<?php echo $x;?>"></span></td>

但也是这个td

    <td><input type="text"  id="proce_<?php echo $x;?>" style="width:70px;" value="<?php echo $x+$h;?>" disabled /></td>

现在我只能动态改变一个div(txtHint),

我的英语。

注意: 我想用不同的文件放入un update, 例如,当值更改时,此脚本为单词

xmlhttp.open("GET","ajax-update.php?id="+str,true);

另一个是

foo.php

感谢

昂嘎

编辑1:

[1] | [2] | [3]

  • [1]:我输入值manualy
  • [2]:使用ajax
  • 进行txtHint更改
  • [3]:我希望这个改变与[2]
  • 相同

编辑2:

document.getElementById("txtHint<?php echo $x;?>").innerHTML=xmlhttp.responseText;
document.getElementById("proce_<?php echo $x;?>").value=xmlhttp.responseText;
那是工作, 但是[2]和[3]中的值是相同的,因为它取自一个文件ajax-update.php 如何添加其他文件但仍在一个ajax请求中?

1 个答案:

答案 0 :(得分:1)

如果我理解你的问题,你想要改变第一个元素(SPAN)和第二个元素(INPUT)的文本。

您似乎已经想到的范围 - 您使用innerHTML。你写道:

document.getElementById("txtHint<?php echo $x;?>").innerHTML=xmlhttp.responseText;

在那之下......你可以添加

document.getElementById("proce_<?php echo $x;?>").value=xmlhttp.responseText;

然而 - 你也应该考虑使用jQuery来做这种事情。它为您处理跨浏览器的内容,并使这种编码更简单。您可以执行所需的所有JSON / XML请求,并轻松更新各个组件。