2016-08-13 30 views
1

jQueryを初めて使用していて、練習しています。jQueryを使用してクエリ結果を選択して表示

<html> 
<head> 
    <title> Testing jQuery 
    </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="script.js" type="text/javascript"></script> 
    <link href="mycss.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <h2 id="myH"> This is a title.</h2> 
    <br> 
    <br> 

    <fieldset> 
     <legend>Data</legend> 
     <form name="myForm"> 
      <input type="text" id="firstData" placeholder="Write something in here" \> 
      <br> 
      <br> 
      <input type="text" id="secondData" placeholder="Write something else in here" \> 
      <br> 
     </form> 
     <button id="formButton" value="Confirm">Confirm</button> 
    </fieldset> 
<br><br><br> 
    <div id="myDiv"></div> 
</body> 

</html> 

このPHPスクリプト:

<?php 

/* Connection to DB*/ 
.... CONNECTIONS STUFF......... 

$query = " SELECT * FROM table1;"; 
$results = mysql_query($query); 
echo " <table border=\"2\"><tr> <th>ID</th><th>First</th><th>Second</th></tr>"; 
while($row = mysql_fetch_array($results)) { 
    ?> 
    <tr> 
     <td> 
      <?php echo $row['ID']?> 
     </td> 
     <td> 
      <?php echo $row[ 'First']?> 
     </td> 
     <td> 
      <?php echo $row[ 'Second']?> 
     </td> 
    </tr> 
    <?php 
    } echo "</table>"; ?> 

そして最後に、このコードをJS:

​​

[OK]を、今私はすべてのコードを挿入したことを、私は、このHTMLの簡単なページをしました問題は、myData.phpスクリプトを使用してデータベースに要素を追加することができますが、上部に要素を追加し、下部にある確認ボタンをクリックすると、クエリを使用してページを作成したいと考えています)すべてconteテーブルのntsが表示されます。だから私は要素を追加することができますが、私はそれらを表示することはできません。私はjQueryを初めて使っていて、それを機能させようとしていますが、私はWeb上で別の研究をしましたが、私の問題を解決するものは何も見つかりませんでした。誰かが私を助けてくれますか?ありがとう!

答えて

1

あなたが右myData.php

$query = " SELECT * FROM table1;"; 
$results = mysql_query($query); 
echo " <table border=\"2\"><tr> <th>ID</th><th>First</th><th>Second</th></tr>"; 
while($row = mysql_fetch_array($results)) { 
    ?> 
    <tr> 
     <td> 
      <?php echo $row['ID']?> 
     </td> 
     <td> 
      <?php echo $row[ 'First']?> 
     </td> 
     <td> 
      <?php echo $row[ 'Second']?> 
     </td> 
    </tr> 
    <?php 
    } echo "</table>"; ?> 

2つのAJAX呼び出しの必要なしに挿入されたレコードの後に​​コードの下に入れて、単一のファイルmyData.php

によって両方の操作を行うことができます。 2番目のボタンのjqueryコードをクリックして削除します。 最初のボタンクリックイベントでmyData.phpファイルが呼び出されます。最初のレコードは、既存のコードを使用してDBテーブルに挿入されます。 DBからレコードを取得するコードを配置した後。 HTMLがレスポンスで送信され、そのHTMLが既存のjqueryコードでDIVに配置されます。あなたは http://www.w3schools.com/jquery/jquery_ajax_load.asp

だけで現在のページ

にdiv要素にそこからのdivをロードするために

+0

ありがとう男!それは完璧に動作するので、2つの異なるAjaxリクエストの間に矛盾がありましたか? –

+0

ええ、2回のAjaxリクエストでは、非同期falseにする必要があります。だから、2番目のAjaxは最初の終了後に解雇されます。 –

+0

パーフェクト!ありがとう:) –

0

あなたは、ビデオチュートリアルのために、このURLをその非常に従うその非常に簡単、それのためにjqueryのロード機能を使用することができますシンプル、ここにDIVを使用し、その後、IDを入力すると、あなたがロードしているページで、このページのdiv

https://www.youtube.com/watch?v=mtz8MdQXhno

に別のIDを使用し、そのIDをロードしてください。それはワードプレスで動作し、単にPHPで動作します 同じコード

+0

ありがとう、もう一つの可能​​な解決策が、私は答えている最初の印を付けました!ありがとうございました:) –

+0

クール、問題ありません –

関連する問題