2017-04-11 15 views
-1

AJAXを使用して練習したいと思います。私はMySQLデータベースを持っていて、いくつかの名前をstoreName列に挿入しました。データベースの列にランダムなテキストを出力するSQLクエリを作成しました。これは正常に動作しているが、私は私のブラウザを更新する場合にのみ:乱数とAJAX

<?php 
    $sql ="SELECT * FROM stores ORDER BY RAND () LIMIT 1"; 
    $res = $mysqli->query($sql); 
    //print($res); 
    if ($res->num_rows > 0) { 
    // output data of each row 
    while($row = $res->fetch_assoc()) { 
     echo "Storename: " . $row["storeName"]. "<br>" .  
    } 
} else { 
    echo "0 results"; 
} 
?> 

私は私が私のブラウザを更新する必要がなくて、私のSQLクエリを呼び出すAJAX機能を、したいと思います。次のコードを作ろうとしましたが、シャッフルボタンを押すと何も起こりません。私はここで間違って何をしていますか?

<body> 
<div id="shuffle" > 
    <h4>Shuffle Stores</h4> 
    <!-- This php function loads everytime I refresh the browser --> 
    <?php include 'function/select_shuffle.php' ?> 

     <form action="function/select_shuffle.php" method="post"> 
     <button>shuffle</button> 
     </form> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <!-- Shuffle AJAX method--> 
    <script> 
     $(document).ready(function(){ 
      $("button").click(function(){ 
       $.ajax({url: "function/select_shuffle.php", success: function(result){ 
        $("#shuffle").html(result); 
       }}); 
      }); 
     }); 
    </script> 
</body> 

AJAX

@Sehdev: AJAX_1

+0

成功コールバックが呼び出されていますか? – Carcigenicate

+0

コメントありがとうございます。それは呼ばれません。実際に私は今、私がボタン「Shuffle」を押すと、 'localhostは現在このリクエストを処理できません。 HTTPエラー500' – Mimi

+0

フォームがデフォルトプロセスで送信されないようにしていません。 – charlietfl

答えて

-1

あなたはAJAX呼び出しを行っている場合は、あなたの現在のページにselect_shuffle.phpファイルを含める必要はありません。

次のコードを試してください。また、コンソールでajaxエラーを確認することもできます。あなたのページを右クリックし、「Inspect」を選択します。その後、 "Network"タブをクリックし、XHR見出しをクリックします。ここであなたのajaxリクエストを追跡できます。ヘッダー、応答、または任意のajaxエラーをチェックすることができます。

<body> 
<div id="shuffle" > 
</div> 
<div> 
    <h4>Shuffle Stores</h4> 
     <button id="btn">shuffle</button> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <!-- Shuffle AJAX method--> 
    <script> 
     $(document).ready(function(){ 
      $("#btn").click(function(){ 
       $.ajax({ 
        url: "function/select_shuffle.php", 
        success: function(result) 
        { 
         $("#shuffle").html(result); 
        } 
       }); 
      }); 
     }); 
    </script> 
</body> 
+0

は答えをいただき、ありがとうございます。ニース私はXHRの見出しでそれを知らなかった。私はちょうどあなたのコードを試しましたが、私は同じエラーが発生しています。私は質問にXHR見出しのスクリーンショットをアップロードしました。 – Mimi

+0

あなたはちょうどselect_shuffle.phpをクリックし、ヘッダとレスポンスタブのスクリーンショットをポストすることができます(そのファイルをクリックすると右側に開きます) – Sehdev

+0

もう一度ありがとうございます。私はちょうどヘッダーの写真を投稿しました。応答]タブでテキストを除いては何もありません: "レスポンスはavaibleでデータを持たない" – Mimi

-1

エラー500は、内部サーバーエラーを意味します。

変更

echo "Storename: ".$row["storeName"]."<br>" . 

送信ボタンを

echo "Storename: ".$row["storeName"]."<br>"; 

するためには、フォームが、トリガーボタンである必要がありますのみAJAX形態であっても理由はありません。

+0

ありがとうございました。私は ';'を追加しましたが、まったく同じエラーを返します。 – Mimi

+0

devtoolsでは、赤色のURLをクリックし、[プレビュー]タブを確認します。そこにあるもの? – DamianImrich

+0

私はちょうど500エラーの詳細を含む画像をアップロードしました。 – Mimi