2016-12-15 10 views
-1

これは非常に基本的なことかもしれませんが、私はAJAXをページのボタンクリックイベントに呼び出す最良の方法を理解できません。 phpを使って表示する。phpとajaxでウェブページのデータを取得しようとしています

<html> 
<head> 
    <title> 
     Test 
    </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"> 
     $(document).ready(function(){ 
      $('#btn').click(function(){ 
       $("#data").html('Loading...'); 

       $.ajax({ 
        url:'test.php', 
        type:'GET', 
        success:function(data){ 
         $("#data").html(data); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <form method="get"> 
     <button id="btn"> 
      Get Data from PHP file 
     </button> 

     <div id="data"> 
     </div> 
    </form> 
</body> 
</html> 

し、データベースの操作を行って、その背後にあるページ、test.php

<?php 
    include ("config.php"); 

    $sql = "SELECT * FROM userInfo;"; 
    $result = mysql_query($sql); 

    $row = mysql_fetch_array($result, MYSQL_ASSOC); 
    $count = mysql_num_rows($result); 

    if ($count > 0) { 
     while($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 
      echo $row["userLogin"] . "<br>"; 
     } 
    } 
?> 

それはかなり基本的であり、私がすることが出来るのです私はdiv.phpと呼ばれる簡単なWebページである持っているもの

ボタンのクリックでクエリ結果を取得しますが、機能しません。ここに何か間違っていますか?

PHPAJAXJSの流れがあれば分かります。

+1

JS内のデータ変数に使用する配列をエンコードし、javascriptで 'JSON.parse(data)'を使用するためにphpファイルの 'json_encode'関数を使用します。古いmysql関数の使用をやめてください。 http://php.net/manual/en/class.pdo.php http://php.net/manual/en/class.mysqli.php –

+0

JSエラー、PHPエラーはありますか?あなたはブラウザでtest.phpを読み込めますか? – Chris

+0

はい、 'test.php'はブラウザにクエリ結果をロードしています。しかし、 'div.php'のボタンをクリックすると何も起こりません。理想的には、 'test.php'からクエリ結果を取得する必要がありますが、残念ながらそれはしません! – Neels

答えて

2

あなたはJSを別々に埋め込む必要があります。あなたはやったことはできませんが、以下のように分割する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('#btn').click(function(){ 
      ... etc 
     }); 
    }); 
</script> 
+0

スクリプトを分けることはうまくいったようです。ありがとう! – Neels

+0

ようこそ。 – Robbie

1

利用可能な情報に基づいてデバッグするのは難しいですが、これは問題だと思います。 <button>要素は<form>要素の内部にあります。つまり、ボタンをクリックすると、フォームを送信してページを再読み込みしています。 AJAXが動作している可能性がありますが、ページがリロードされてデータが表示されない場合があります。ソリューション:

  • ページから<form>を削除するか、jqueryの中ボタンのクリック機能のためにe.preventDefault()に見てどちらか。

もう1つの注意点として、mysql_ *関数を使用しないようにデータベースにアクセスするには、コードをPDOなどの別のライブラリを使用して移行する必要があります。

関連する問題