0

我已经看到一些片段试图解释这是如何完成的，但是我正在努力集成代码。正如您从我的代码和以前的问题中看到的那样，我是 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

4

1 回答 1

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您还必须使用 $_POSTPHP 访问它，就像您从普通 html 表单获取数据一样。

$id = $_POST['id'];

然后你可以$id在你的查询中使用。当然，您必须验证它是否有效，并确保它已被清理以防止诸如 sql 注入之类的事情。

我还注意到您仍在使用原始mysql api的 php。如果您已阅读官方 php 文档http://www.php.net/manual/en/intro.mysql.php ，则不再推荐。您可以使用PDO或MySQLi利用准备好的语句来防止 sql 注入。

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

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).

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

于 2012-10-13T14:47:11.993 回答