1

これは、2つのテキスト入力を含む私のhtml-単純なフォームです。

    <div id="content">
      <div id="options">
        <form id="form1">
          <table>
            <tr>
              <td>Date:</td>
              <td><input name="date" type="text" id="datepicker" /></td>
            </tr>
            <tr>
              <td>Size:</td>
              <td><input name="size" type="text" /></td>
            </tr>
            <tr>
              <td colspan="2"><input name="submit" type="submit" value="Submit"/></td>
            </tr>
          </table>
        </form>
      </div>
      <div id="result"> </div>
    </div>

そして、送信時にこのフォームの結果を取得してMySQLデータベース'/details.php'をクエリし、PHPファイルの結果をDIV'result'に出力しようとしています。変数をPHPファイルに渡し、結果をDIVに出力するのに苦労しています。JQuery AJAXを使用する必要があることはわかっていますが、それを機能させるのに苦労しています。

これは私の現在のAJAXスクリプトです：

     <script>
    $('#form1').submit(function(e) {
        e.preventDefault(); // stops form from submitting naturally
        $.ajax({
            data: $(this).serialize(),
            url: '/details.php',
            success: function(response) {
                $('#result').html(response); 
            }
        });
    });
    </script>

そして私のPHPファイルで変数を取得しようとしています：

     $date=$_GET['date'];
     $size=$_GET['size'];

次に、SQLクエリを使用してデータベースに接続し、結果をエコーアウトします。私が間違っているかもしれないところへの提案。助けてくれてありがとう！

4

4 に答える 4

2

編集

次のように、jQueryコードをdomReadyイベントハンドラーでラップする必要があります。

$(function() {
    // all your jQuery code goes here!
});

これが既存のコードで機能するフィドルです：http：//jsfiddle.net/89A2m/

于 2012-05-24T02:23:01.273 に答える
0

コールバックを使用するか、POSTに変更してみてください。

コールバック：単純なjQuery、PHP、JSONPの例？

投稿を使用しています...HTML

<form id="form1" method="POST">
          <table>
            <tr>
              <td>Date:</td>
              <td><input name="date" type="text" id="datepicker" /></td>
            </tr>
            <tr>
              <td>Size:</td>
              <td><input name="size" type="text" /></td>
            </tr>
            <tr>
              <td colspan="2"><input name="submit" type="submit" value="Submit"/></td>
            </tr>
          </table>
        </form>

JS

<script>
$('#form1').submit(function(e) {
    e.preventDefault(); // stops form from submitting naturally
    $.ajax({
        data: $(this).serialize(),
        url: 'details.php',
        method: 'POST',
        success: function(response) {
            $('#result').html(response); 
        }
    });
});
</script>

そしてあなたのPHPで

$date=$_POST['date'];
$size=$_POST['size'];
于 2012-05-24T02:24:59.230 に答える
0

変化する：

<form id="form1">

に

<form id="form1" onsubmit="return false;">

次に、jqueryajaxの「成功」でjavascriptを実行しますか

于 2012-05-24T02:27:40.830 に答える
0

何かを行う前に、phpファイルにエコーを追加して、ページにアクセスして追加していることを確認してください

if (window.console != undefined) {
    console.log(response);
}

境界線のすぐ下で$('#result').html(response);、phpが何を吐き出しているかを確認します。console.log('whatever')関数の最後の行として別の行を追加 $('#form1').submit(function(e) {して、少し絞り込むのに役立てることもできます。

于 2012-05-24T02:31:38.837 に答える