我可以使用AJAX将文本放入2个框而不是1个框中

时间:2012-05-13 12:50:58

标签: php html sql ajax

我创建了一个简单的html页面,它从我的一个数据库表中获取信息并将其粘贴到文本框中。它通过一个处理请求的AJAX函数连接到PHP来实现这一点。

我想知道的是,这些数据是否可以放在两个文本框中,而不仅仅是一个。我不知道该怎么做,因为在我的代码中我必须声明一个文本框,我是否必须为每个文本框分别创建函数才能使其工作或者是否有更简单的解决方案?

HTML PAGE:

<html>
<head>
<script type="text/javascript">
function getDetails(str)
{
if (str=="")
  {
  document.getElementById("Text1").value=""; 
  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("Text1").value=xmlhttp.responseText; // here is why it only      goes into "Text1"
    }
  }
xmlhttp.open("GET","getDetails.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<!--here a user enters an "RFID" and the details are returned into "Text1"-->
<input type="text" name="RFID1" value="" onKeyup="getDetails(this.value)" /> 
<input type="text" id="Text1" name="Text1" />
<input type="text" id="TextScore1" name="TextScore1"/>
</form>

<br/>

<form>
<!--here a user enters another "RFID" and the details are also returned into "Text1"
(though I would like it to go to Text2 and TextScore2)-->
<input type="text" name="RFID2" value="" onKeyup="getDetails(this.value)" />
<input type="text" id="Text2" name="Text2"/>
<input type="text" id="TextScore2" name="TextScore2"/>
</form>


</body>
</html>

PHP PAGE:

<?php
$q=$_GET["q"];

$con = mssql_connect("SQL", "0001", "Password");
if (!$con)
  {
  die('Could not connect: ' . mssql_get_last_message());
  }

mssql_select_db("database1", $con);



$sql="SELECT * FROM Scrabble WHERE RFID = '".$q."'";

$result = mssql_query($sql);


while($row = mssql_fetch_array($result))
  {

  echo $row['Tile'];

  echo $row['TileScore'];
  }


mssql_close($con);
?>

* note - 我的服务器使用MsSQL

另一个问题,正如你在HTML文件中看到的,我有两种形式,我需要在两种形式中都有相同的功能。在这里,我想我可能要为每个表单创建另一个PHP文件来连接。但是,为了确定我会问,是否有可能将其保存在一个文件中,如果是这样,您将如何处理它?<​​/ p>

编辑似乎我让一些人感到困惑,我不希望将文本放入两个文本框中,但实际上将结果拆分为两个文本框。这样“文本”最终会出现在文本框Text1和TextScore中,最终会出现在文本框TextScore1

4 个答案:

答案 0 :(得分:1)

为什么不呢?

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
  var response=xmlhttp.responseText;
  document.getElementById("Text1").value=response;
  document.getElementById("Text2").value=response;
}

对于第二个函数,您可以使用相同的PHP文件。在进行ajax调用时,您可能需要将查询字符串值传递给PHP页面,以确定“此调用来自何处”。

类似

getDetails.php?from="userinfo"

getDetails.php?from="checkprice"

在PHP文件中,您可以检查查询字符串varible的值并执行适当的代码集。您可以使用if / switch等...

但我更愿意在逻辑上区分功能并将其保存在单独的文件中。

Ex :我会将所有与用户相关的功能保留在userajaxhelper.php中,并将我的订单相关功能保存在另一个名为o rderajaxhelper.php的文件中。这使我的代码井然有序。

编辑:只是想把Andy Hume的评论包括在我的答案中,因为它是重要的一点。你应该确保你不会成为SQL injection的受害者。

答案 1 :(得分:0)

你有一个代码行

document.getElementById("Text1").value=xmlhttp.responseText;

如果您想将相同的文字添加到box2

document.getElementById("yourSecondText").value=xmlhttp.responseText;

如果不一样,那么php应该以JSON格式给出答案,分别是part1,....

作为对ajax的回应,您应该为其文本框分配适当的部分。

很抱歉,如果我没有得到问题。

答案 2 :(得分:0)

您可以将结果从PHP返回为JSON,请参阅json_encode并发送正确的标题,内容类型application / json。

然后使用json2在JavaScript中解析JSON,您将能够将一个键/参数分配给第一个字段,将另一个键/参数分配给另一个字段。

...
$result = array();
while($row = mssql_fetch_array($result))
{
    $result[] = $row;
}
mssql_close($con);

header('Content-type: application/json');
echo json_encode($result);

和JS(注意:我没有测试过JS代码,但它应该提供一个例子):

...
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
    var jsonObj = JSON.parse(xmlhttp.responseText);

    document.getElementById("Text1").value = jsonObj.Title;
    document.getElementById("TextScore1").value = jsonObj.TileScore;
}
...

答案 3 :(得分:0)

简短回答:是的。

更长的回答:当响应返回时,你可以做“你想要的任何事情”。你只需要确切地弄清楚你想要做什么以及如何实现它;早期的答案已经给出了很好的指示。但是,作为一般概念,您可能希望“缩小”到问题的准确性 - 尽可能使您拥有的页面尽可能通用,以便它仍能满足您的需求。

你可能想要做什么的例子(没有经过测试,只是设置得很快,但我认为你应该这样做)......

<html>
    <head>
        <script type="text/javascript"><!--
            function doAjaxRequest() {
                // Set up Ajax-request, that will execute the
                // response it gets from the server "as is"...
                // Just what you were doing, but instead of
                // putting the response into textarea, execute it...
                eval(xmlhttp.responseText);
            }
        // --></script>
    </head>
    <body>
        <form>
            <textarea id="txt1"></textarea>
            <textarea id="txt2"></textarea>
            <input type="button" onclick="doAjaxRequest();return false">
        </form>
    </body>
</html>

服务器端......

<?php
    // It doesn't matter which way you get the data, just... use it :-p
    echo('document.getElementById("txt1").value="Response 1";');
    echo('document.getElementById("txt2").value="Response 2";');
?>