php - 如何将 AJAX 结果传递回请求者页面

Question

我已经看到一些片段试图解释这是如何完成的，但是我正在努力集成代码。正如您从我的代码和之前的问题中看到的那样，我是 AJAX 新手，但发现它非常有值(value)。

基本上，我正在创建一个小型票务系统，用于内部作业管理和问题跟踪。

到目前为止，我有一个下拉表单，您可以在其中选择用户并使用 AJAX 从 MySQL 返回用户 Assets 。然后主题标题上有一个复选框。 (这将转移到 Assets ，因为意识到某些用户可能拥有多个 Assets 。)

我需要了解的是如何将 AJAX 结果中选择的 Assets 传递回原始表单，以便在提交工单时记录 Assets 。

下面的所有代码当前尚未清理，需要好好清理!

这是原始页面的 AJAX 代码和表单:

<h3>Assign User</h3> 

<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").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").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","./includes/submit-ticket-ajax-1.php?q="+str,true);
xmlhttp.send();
}
</script>


<select style="width:217px; height:20px !important;" name="company_staff_select" onchange="showUser(this.value)">

            <option value=""></option>';

      $o = "SELECT * FROM company_staff WHERE company_id = " . $company_id . " ORDER BY id DESC";
    $rs = mysql_query($o);
    $nr = mysql_num_rows($rs);
    for ($i=0; $i<$nr; $i++) {
    $r = mysql_fetch_array($rs);
$staff_id = $r['id'];

            echo '<option id="person" name="person" value="' . $staff_id . '">' . $r['firstname'] . ' ' . $r['lastname'] . '</option>';
}

echo '

</select>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

这是AJAX调用的页面代码:

$q=$_GET["q"];



$sql="SELECT * FROM company_staff WHERE id = '$q'";

$result = mysql_query($sql);

$row = mysql_fetch_array($result);


$users_computer = $row['computer_id'];
$users_sim = $row['sim_id'];
$users_mobile = $row['mobile_id'];




$sql2="SELECT * FROM company_computers WHERE `id` = '$users_computer'";

$result2 = mysql_query($sql2);

$row2 = mysql_fetch_array($result2);




$sql3="SELECT * FROM company_sims WHERE id = '$users_sim'";

$result3 = mysql_query($sql3);

$row3 = mysql_fetch_array($result3);




$sql4="SELECT * FROM company_mobiles WHERE id = '$users_mobile'";

$result4 = mysql_query($sql4);

$row4 = mysql_fetch_array($result4);




echo '<br /><table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email<input type="checkbox" name="email" value="' . $row['email'] . '"  /></th>
<th>Computer Name<input type="checkbox" name="comp" value="' . $row2['id'] . '"  /></th>
<th>Company Phone Number<input type="checkbox" name="sim" value="' . $row3['id'] . '"  /></th>
<th>Company Mobile<input type="checkbox" name="mobile" value="' . $row['id'] . '"  /></th>
</tr>';

  echo '<tr>
        <td>' . $row['firstname'] . '</td>
        <td>' . $row['lastname'] . '</td>
        <td>' . $row['email'] . '</td>
        <td>' . $row2['computer_name'] . '</td>
        <td>' . $row3['phone_number'] . '</td>
        <td>' . $row4['make'] . ' ' . $row4['model'] . '</td>

    </tr>


<tr>
<b>Please select the device this ticket is related to if any.</b>
</tr>


        ';




echo '</table>';

?>

任何建议都将不胜感激，并且越分割，赞赏就越大!

亲切的问候，

n00bstacker

Answer 1

您可以使用 jQuery 更轻松地完成此操作。 只需包含 jQuery 库即可:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>
    $('#idOfYourSelectBox').change(function(){
       var val = $(this).val();

       //post submits data via post
       $.post("./includes/submit-ticket-ajax-1.php", {"id" : val}, function(data){
          $('#txtHint').html(data); //the same as innerHTML in javascript
       });
       //you can also pass more data by adding items in the map:
       //{"id" : val, "name" : val2}
       //or simply serialize the form if you're submitting a form via ajax, this way you won't need to get the individual values for each field
    });
</script>

数据通过POST提交到submit-ticket-ajax-1.php。与提交表单时相同:

<form method="post">

唯一的区别是它不需要整页刷新。

由于您通过 POST 提交了数据，因此您还必须在 PHP 中使用 $_POST 访问它，就像从普通 html 表单获取数据一样。

$id = $_POST['id']; 

然后您可以在查询中使用 $id 。当然，您必须验证其是否有效，并确保对其进行清理以防止诸如 sql 注入(inject)之类的事情。

我还注意到您仍在使用原始的 php 的 mysql api。如果你读过php官方文档http://www.php.net/manual/en/intro.mysql.php 不再推荐了。您可以使用 PDO 或 MySQLi 来利用 prepared statements这可以防止sql注入(inject)。

一些建议(我并不是真正的专家，因此通过快速谷歌搜索来验证您正在学习的内容总是明智的):

PHP 是一种模板语言，因此不会回显 html，而是仅回显 html 内的值:

<td><?php echo  $row['firstname']; ?></td>

而不是:

echo '<tr>
        <td>' . $row['firstname'] . '</td>

更新:

在您的原始代码中，您有以下内容:

xmlhttp.open("GET","./includes/submit-ticket-ajax-1.php?q="+str,true);
xmlhttp.send();

当你将其转换为 jquery 代码时，它将如下所示:

$.get("./includes/submit-ticket-ajax-1.php", {'q' : str});

然后在您的 submit-ticket-ajax-1.php 文件中，您将访问通过 ajax 传递的值并在查询中使用它:

$q=$_GET["q"];
$sql="SELECT * FROM company_staff WHERE id = '$q'";

不知怎的，我迷路了，因为之后还有一堆查询。但我假设您正在利用该查询的结果来生成 html，即:

echo '<br /><table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email<input type="checkbox" name="email" value="' . $row['email'] . '"  /></th>
<th>Computer Name<input type="checkbox" name="comp" value="' . $row2['id'] . '"  /></th>
<th>Company Phone Number<input type="checkbox" name="sim" value="' . $row3['id'] . '"  /></th>
<th>Company Mobile<input type="checkbox" name="mobile" value="' . $row['id'] . '"  /></th>
</tr>';

您是说您想要将数据从 submit-ticket-ajax-1.php 文件传递​​到您最初调用 ajax 的页面，对吗？ 这就是为什么您不需要包含表格和表单的 html。 您需要的是将查询结果编码为 json，以便稍后可以在客户端由 javascript 解析。 由于您有多个结果集，您可能希望将它们全部存储在这样的数组中，然后使用 json_encode 将其转换为 json 格式。

$data = array("row" => $row, "row2" => $row2);
echo json_encode($data);

回到客户端代码。现在，您必须调用 JSON.parse 将 json 字符串转换为 javascript 对象，以便可以使用 javascript 对其进行操作:

   $.post("./includes/submit-ticket-ajax-1.php", {"id" : val}, function(data){
      var json_data = JSON.parse(data); //convert to object
      //accessing the data that was passed
      var email = json_data['row']['email'];
      var row2_id = json_data['row2']['id'];


   });

现在您已经有了数据，您只需使用 JavaScript 将值提供给表单即可。我假设您在某处有一个隐藏容器，并且您想要提供值的表单位于该容器内:

<div style="display:none;">

在这种情况下，您所要做的就是将通过 ajax 获取的数据分配给以下形式:

$('#email').val(email);

但是当然，您也可以通过在ajax调用的页面上生成html并使用$('#container').html(data)来完成您最初所做的事情。

这已经很长了，我真的希望我已经解释清楚了。但如果您还有其他问题，请随时提问。