0

私はAJAXを学んでいるところなので、我慢してください。HTML / JavascriptファイルとPHPファイルを使用してデータベースとの間で情報を追加および取得する、AJAXを使用した小さなプログラムをまとめています。私はいくつかのレンディションを試しましたが、ページをメインページにとどめて、エラーまたは成功を示すメッセージでフォームをリセットするだけではうまくいきません。PHPファイルは、mysqliを使用して設定され、テキストフィールドとファイルの送信を処理してから、そのメッセージをエコーし​​ます。最新バージョンのガイドとしてJQueryクックブックを使用していますが、メインページが終了し、ブラウザーでPHPファイルが開きます。もちろん空白です。ただし、データベースに新しい行を追加しているので、少なくともそれは機能しています。

PHPStormとFirebugを使用しています。私のコードが機能しない理由について何か考えはありますか？

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.min.js"></script>
    <script src="jquery.validate.js"></script>
    <script>
        $('addForm').validate();
        $('addForm').submit(function(event){
            event.preventDefault();

            $('input[name="usingAJAX"]', this).val('true');
            var $this=$(this);
            var url=$this.prop('action');
            var dataToSend = $this.serialize();
            var callback = function(dataReceived) {
                $this.hide();
                //result message
                $('body').append(dataReceived)
            };
            var typeOfDataToReceive = 'html';
            $.get(url, dataToSend, callback, typeOfDataToReceive)
        });
    </script>
</head>
<body>
    <form id="addForm" action="addActorInfo.php" enctype="multipart/form-data">
        <input type="hidden" name="usingAJAX" value="false"/>
        <label for="aname">Actor Name: </label>
        <input type="text" name="aname" id="aname" class=required/>
        <br>
        <br>
        <label for="aimage">Actor Photo: </label>
        <input id="aimage" type="file" name="aimage" class="required">
        <br>
        <br>
        <input type="submit" value="ADD"/>
    </form>
</body>
</html>
4

2 に答える 2

1

いくつかの問題。

  • 誰もが指摘しているように、フォームのセレクター、$('addForm')がありません。#

  • JavaScriptが呼び出されたときにまだ存在していない$(document).ready()ため、関数が欠落しています。これは必須です。form

  • jQuery Validateプラグインにはコールバック関数が組み込まれ submitているため、別のハンドラーは必要ありません。ドキュメントによると、「検証後にAjaxを介してフォームを送信するのに適切な場所です。」submitHandler

このようなもの：

.ajax（OPの機能がすでに正しいと仮定します。）

<script src="jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).ready(function() {
    $('#addForm').validate({
        //other options,
        submitHandler: function (form) {

            // your ajax code

            return false;  // <-- stop form redirection since you used ajax
        }
    });
});
</script>
于 2013-02-19T21:41:02.853 に答える
1

いくつかの問題があり、そのほとんどはすでにコメントで議論されています。

  • 「送信」ハンドラーを設定したときのセレクターが間違っていました。だったはず$('#addForm')

  • 「ファイル」要素$.get()を含むフォームを処理するために使用しようとしています。<input>それはできません。

ファイルをアップロードするには、次のいずれかを実行できます。

  1. フォームを POST し (GET ではなく POST である必要があります) <iframe>、ページ上の隠し要素の「ターゲット」属性を指定します。サーバーからの応答には、親ページ (フォームがあるページ) を適切に更新するための JavaScript が含まれている必要があります。

  2. HTML5 ファイル API を使用してファイルの内容を取得し、XHR 経由でアップロードします。私はこれをやろうとしたことはありませんが、これは古いSOの質問です。

于 2013-02-19T21:47:55.323 に答える