2

これはよくある質問であることは知っています。理解を深めるために多くの例を見てきましAJAXたjQuery。

ドロップダウンボックスの選択に基づいて、変更されAJAXたクエリの結果に対するリクエストが送信されるときに、ドロップダウンボックスが1つあるという単純な状況があります。SQL

ページは正しく読み込まれ、ドロップダウン ボックスから部門が選択されているときに関数が呼び出されます (アラートで通知されます) が、返されるデータが得られません。問題を特定する際に、getTeachers.php ファイルが実際に実行されているかどうかを確認するにはどうすればよいですか?

サーバー上で getTeacher.php を呼び出すためのWeb ページスクリプト

<script src="http://localhost/jquery/jquery.min.js">
</script>
<script>
function checkTeacherList(str) 
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtTeacher").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("txtTeacher").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getTeachers.php?q="+str,true);
xmlhttp.send();
alert(str); //To test it is getting this far, which it does
}
</script>

サーバーからの戻りデータのドロップダウン ボックスと txtTeacher ID

<select name="department_list" id="department_list" onchange="checkTeacherList(this.value);" >  
<?php  
$options[0] = 'All';
$intloop = 1;
while($row = mysql_fetch_array($department_result))
{
$options[$intloop] = $row['departmentName'];
$intloop = $intloop + 1;
}
foreach($options as $value => $caption)  
{  
echo "<option value=\"$caption\">$caption</option>";  
}  
?>  
</select> 

<div id="txtTeachers">Teacher names</div>

サーバー側 PHP - getTeachers.php

<?php
 $q=$_GET["q"];

 $con = mysql_connect('localhost', 'root', '');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error($con));
   }

 $db_selected = mysql_select_db("iobserve");
 $sql="SELECT * FROM departments WHERE departmentName = '".$q."';";

 $result = mysql_query($sql);

 while($row = mysql_fetch_array($result))
   {
   echo $row['teacherName'];
   }
 mysql_close($con);
 ?>
4

3 に答える 3

4

Jquery を使用して最初の Ajax リクエストを行ったのを覚えていますが、特にエラー処理に関する適切な完全な例を見つけるのが難しいことに気付きました (データベースが利用できないなど、バックエンドで何か問題が発生した場合、ユーザーにどのように伝えることができますか?) .

これは、いくつかのエラー処理を含む PDO と Jquery を使用して書き直されたコードです (最近の PHP バージョンから削除されているため、Mysql 拡張機能は使用しませんでした (ところで、コードは sql インジェクションに対して開かれているため、データベースを削除するのは非常に簡単です)。

<!DOCTYPE html>
<html>
<head>
    <title>Selectbox Ajax example</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>

<div id="error"></div>
<select name="department_list" id="department_list">
    <option value="department1">Department 1</option>
    <option value="department2">Department 2</option>
</select>

<div id="txtTeachers">Teacher names</div>
<div id="result">
    <ul id="list">
    </ul>
</div>

    <script type="text/javascript">

        $(document).ready(function () {

            // if user chooses an option from the select box...
            $("#department_list").change(function () {
                // get selected value from selectbox with id #department_list
                var selectedDepartment = $(this).val();
                $.ajax({

                    url: "getTeachers.php",
                    data: "q=" + selectedDepartment,
                    dataType: "json",

                    // if successful
                    success: function (response, textStatus, jqXHR) {

                        // no teachers found -> an empty array was returned from the backend
                        if (response.teacherNames.length == 0) {
                            $('#result').html("nothing found");
                        }
                        else {
                            // backend returned an array of names
                            var list = $("#list");

                            // remove items from previous searches from the result list
                            $('#list').empty();

                            // append each teachername to the list and wrap in <li>
                            $.each(response.teacherNames, function (i, val) {
                                list.append($("<li>" + val + "</li>"));
                            });
                        }
                    }});
            });


            // if anywhere in our application happens an ajax error,this function will catch it
            // and show an error message to the user
            $(document).ajaxError(function (e, xhr, settings, exception) {
                $("#error").html("<div class='alert alert-warning'> Uups, an error occurred.</div>");
            });

        });

    </script>

</body>
</html>

PHP部分

<?php

// we want that our php scripts sends an http status code of 500 if an exception happened
// the frontend will then call the ajaxError function defined and display an error to the user
function handleException($ex)
{
    header('HTTP/1.1 500 Internal Server Error');
    echo 'Internal error';
}

set_exception_handler('handleException');


// we are using PDO -  easier to use as mysqli and much better than the mysql extension (which will be removed in the next versions of PHP)
try {
    $password = null;
    $db = new PDO('mysql:host=localhost;dbname=iobserve', "root", $password);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // note the quote thing - this prevents your script from sql injection
    $data = $db->query("SELECT teacherName FROM departments where departmentName = " . $db->quote($_GET["q"]));
    $teacherNames = array();
    foreach ($data as $row) {
        $teacherNames[] = $row["teacherName"];
    }

    // note that we are wrapping everything with json_encode
    print json_encode(array(
            "teacherNames" => $teacherNames,
            "anotherReturnValue" => "just a demo how to return more stuff")
    );

} catch (PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}
于 2013-07-21T11:45:22.163 に答える
1

getTeacher.php ページのクエリを次のように変更します。$sql="SELECT * FROM departments WHERE departmentName = '$q'";

于 2013-07-21T09:13:03.520 に答える
0

単一の文字列で応答を送信する必要があります。したがって、クエリによって返されるすべての教師の文字列を作成します。

そして、あなたの ajax 部分で、この文字列を分割します。

于 2013-07-21T11:49:17.287 に答える