如何將AJAX結果傳回給請求者頁面

Question

我已經看到一些片段試圖解釋這是如何完成的，但我正在努力整合代碼。正如你將從我的代碼和以前的問題中看到的，我是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

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注入的事情發生。

我還注意到，您還在使用PHP的原mysql api。如果您已經閱讀過官方的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文件，你正在訪問，這是值通過阿賈克斯傳遞，並在您的查詢中使用它：

$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文件到你所在的頁面原來打電話給阿賈克斯吧？ 這就是爲什麼你不需要帶有表格和表格的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']; 


    }); 

現在，你有數據，你可以suppply值，以使用JavaScript的形式。我假設你有你要提供價值隱藏容器的地方和形式是容器內：

<div style="display:none;"> 

在這種情況下，所有你需要做的就是分配通過ajax獲取到這些形式的數據等：

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

但是，當然，你也可以做你最初是由剛剛產生所謂的阿賈克斯，只是使用$('#container').html(data)頁面上的HTML做什麼。

這已經變得非常漫長了，我真的很希望我已經解釋清楚了。但如果您有其他問題可以隨意問。