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

【问题标题】：Can I place text into 2 boxes rather than 1 using AJAX我可以使用 AJAX 将文本放入 2 个框而不是 1 个框吗
【发布时间】：2012-05-21 06:15:14
【问题描述】：

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

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

HTML 页面：

<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 页面：

<?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 文件来连接。但是为了确定我要问的是，是否可以将其保存在一个文件中，如果可以，您将如何处理？

EDIT 看来我把一些人弄糊涂了，我不希望将文本放入两个文本框中，但实际上将结果拆分为两个文本框。这样“Text”会出现在文本框 Text1 中，而 TextScore 会出现在文本框 TextScore1 中

【问题讨论】：

顺便说一句，您可能想研究一下使用 PHP 和 MsSQL 的方法，它们不会让您受到 SQL 注入攻击：en.wikipedia.org/wiki/SQL_injection
您可以根据需要更改任意数量的元素/输入的内容。只需对您已经知道的每个元素执行此操作即可。

标签： php html sql ajax

【解决方案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 文件中，您可以检查查询字符串变量的值并执行相应的代码集。您可以在那里使用 if /switch 等...

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

Ex：我会将所有与用户相关的功能保存在 userajaxhelper.php 中，并将我的订单相关功能保存在另一个名为 orderajaxhelper.php 的文件中。这使我的代码井井有条。

编辑：只想在我的回答中加入安迪休谟的评论，因为它很重要。你真的应该确保你不会成为SQL injection 的受害者。

【讨论】：

【解决方案2】：

简短回答：是的。

更长的答案：当响应返回时，您可以“做任何你想做的事”。你只需要弄清楚你想要做什么以及如何实现它；较早的答案已经给出了很好的指导。不过，作为一般概念，您可能希望“缩减”到问题的准系统 - 让您拥有的页面尽可能通用，以便它仍然可以满足您的需求。

您可能想要做的示例（未经测试，只是快速设置，但我认为您应该做到这一点）...

<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";');
?>

【讨论】：

抱歉，您能否澄清一下您对“doAjaxRequest()”函数的含义 - 尝试使用 eval(xmlhttp.responseText);但我只是得到一个错误
好的，所以我得到了 eval(xmlhttp.responseText); 工作，但现在在 php 文件中，我无法使用获取的信息更改文本框的值.我总是得到“$Text is not defined”或类似的东西

【解决方案3】：

您可以从 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;
}
...

【讨论】：

【解决方案4】：

你有一个代码行

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

如果你想在box2中添加相同的文本

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

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

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

对不起，如果我没有得到问题。

【讨论】：