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

时间：2012-10-13 14:14:31

标签： php javascript mysql ajax

我已经看到一些片段试图解释这是如何完成的，但我正在努力整合代码。正如您将从我的代码和之前的问题中看到的，我是AJAX的新手，但却发现它非常有益。

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

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

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

以下所有代码目前尚未消毒，需要清洁！

这是原始页面中的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

1 个答案:

答案 0 :(得分：2)

使用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>

数据通过submit-ticket-ajax-1.php提交给POST。这与提交表单时的内容相同：

<form method="post">

唯一的区别是它没有完整页面刷新。

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

$id = $_POST['id'];

然后您可以在查询中使用$id。当然你必须验证它是否有效，并确保它已被消毒以防止sql注入等事情。

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

一些建议（我不是真正的专家，所以通过快速谷歌搜索验证你正在学习的内容总是明智的）：

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)来完成你最初的工作。

这已经很久了我真的希望我已经清楚地解释了它。但如果您有其他问题可以随意提问。

相关问题
最新问题