php - 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

score 2 · Accepted Answer

これは、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">

唯一の違いは、ページ全体を更新せずに実行することです。

また、を介してデータを送信したため、通常のhtmlフォームからデータを取得するのと同じように、PHPPOSTを使用してデータにアクセスする必要があります。$_POST

$id = $_POST['id'];

次に、クエリで使用でき$idます。もちろん、それが有効かどうかを確認し、SQLインジェクションなどを防ぐためにサニタイズされていることを確認する必要があります。

また、あなたがまだmysql apiphpのオリジナルを使用していることに気づきました。公式のphpドキュメントhttp://www.php.net/manual/en/intro.mysql.phpを読んだことがある場合は、もうお勧めしません。SQLインジェクションを防ぐプリペアドステートメントPDOを使用するかMySQLi、利用することができます。

いくつかのアドバイス（私は実際には専門家ではないので、グーグルで簡単に検索して、あなたが学んでいることを確認するのが常に賢明です）：

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

これは本当に長くなってきたので、はっきりと説明できたと思います。ただし、さらに質問がある場合は、お気軽にお問い合わせください。

php - AJAXの結果をリクエスターページに戻す方法

1 に答える 1

Related

Reference