0

JSON を使用して、MYSQL DB から「アイテム」と呼ぶ JavaScript オブジェクトを取得しようとしています。後で、この JavaScript オブジェクトを使用してグラフをプロットします。今は、変数「items」を「body」セクションに出力したいだけです。(コードに見られるように)。

オンラインでいくつかの提案された回答を見つけました: retrieveResults() と retrieveResults2() ですが、どれもうまくいきませんでした。助けていただければ幸いです。

現在、「document.write(items)」からまったく出力が得られません。その理由がわかりません。

getdata.php ファイル:

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

$con = mysqli_connect('localhost','root','12345678','test');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

mysqli_select_db($con,"test");
$sql="SELECT * FROM example5 WHERE time = '".$q."'";

$result = mysqli_query($con,$sql);

$result_array = array();
while($row = mysqli_fetch_array($result))
{
    $result_array[] = array($row['time'], $row['data']);
}
echo json_encode($result_array);
mysqli_close($con);
?>

index.html ファイル:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <script language="javascript">
        var items =[];

        function run(){
            $.getJSON('getdata.php', function(data) {


                $.each(data, function(key, val) {
                    items.push('<li id="' + key + '">' + val + '</li>');
                });

                $('<ul/>', {
                    'class': 'my-new-list',
                    html: items.join('')
                }).appendTo('body');
            });
        }

        function retrieveResults2(str){
            $.ajax({
                dataType: "json",
                url: "getdata.php",
                data: data,
                success: run
            });
        }

        function retrieveResults(str){
            jQuery.ajax({
                type: 'GET',
                url: "getdata.php",
                data: {
                    q: str,
                }, 
                success: function(data, textStatus, jqXHR) {
                    var json = $.parseJSON(data);

                    $.each(json, function(index, value) {
                    items.push(value); // Not sure if it is correct, you might need to do some changes, but this is for the global idea 
                    }
                }
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('An error occurred:'+errorThrown);
                }
            });
        }

        window.onload = retrieveResults2(1);

    </script>
</head>
<body>
    <form>
        <select name="users">
        <option value="">Select Time:</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="4">5</option>
        <option value="4">6</option>
        <option value="4">7</option>
        </select>
    </form>
    <script type="text/javascript">
        document.write(items);


    </script>

</body>
</html>
4

2 に答える 2

0

を呼び出した時点ではdocument.write()、itemsは空の配列です (Ajax ベースの HTTP 要求に対する HTTP 応答がまだ受信および処理されていないため)。

Ajax コールバックでドキュメントを変更する必要があります (これは DOM を使用して行う必要があり、既存のドキュメントが破棄されるためではありません) document.write。document.write

また、 の値を渡す ajax リクエストを行うことはないqため、SQL クエリはおそらくエラーをスローし、有用な応答を返す代わりにスクリプトを終了させます。

于 2013-08-14T09:20:26.940 に答える