0

ajaxスクリプトによって呼び出されるmail.phpファイルがあります。完全を期すために、ajaxスクリプトを以下に添付します。mail.phpファイルが行うのは、サーバー側の検証を実行することだけです。すべてが合格するmail()と、ajaxリクエストから送信されたデータを含むメールが送信されます。

私がやりたいのは、リクエストの応答に基づいていくつかの追加のJavaScriptアクションを実行することです。現在の状態では、リクエストの応答が画面にエコーされるだけで問題ないことがわかります。しかし今、私は応答に基づいてHTML要素を変更したいと思います。

たとえば、メールが送信された場合は「OK」という画像をページに追加し、メールが送信されなかった場合は「FALSE」という画像をページに追加するとします。私が（擬似コードで）やりたいことはこれです：

if ( request is OKAY ) $('.contact').append('<img src"OK"');
else ( $('.contact').append('<img src="BAD'');

これを実行する方法はありますか？

ありがとう！

ajaxスクリプトを以下に示します。

$('.submit').click(function() {
    $('div.load').html('<img src="images/load.gif" alt="Loading..." id="loading" />'); 

    //creation of variables to send
    var name = $('#name').val();
        email = $('#email').val();
        phone = $('#phone').val();

    $.ajax({
        url: 'mail.php',
        type: 'POST',
        data: 'name=' + name + '&email=' + email + '&phone=' + phone,

        success: function(result) {
            $('p.error,p.correct').remove();
            $('.contact').append(result);
            $('#loading').fadeOut(500, function() {
                $(this).remove();
            });

        }
    });

    return false; 
});
4

3 に答える 3

3

PHPが「OKAY」というテキストで応答すると仮定します。

if (result==="OKAY")
   $('.contact').append('<img src"OK" />');
else
   $('.contact').append('<img src="BAD" />');

または：

$('.contact').append('<img src"' + (result==="OKAY"?'OK':'BAD') + '" />');

別の方法は、メッセージと画像の両方を含むhtmlを返すようにPHPを更新することです。たとえば、成功すると次のように返されます。

Your request was successful. <img src="OK" />

「JS以外のユーザーにも適切なメッセージが届くように、現在の応答もそこに保持したいと思います。」

AjaxコードはJSを使用しているため、JS以外のユーザーは何も取得しません...

于 2012-06-04T21:03:32.160 に答える
1

おそらく、サーバー側ハンドラーが応答を介してそのステータスを返すようにする必要があります。たとえば、JSONとしてフォーマットされます（PHPにはそのための関数があります）。

これを実現し、JavaScript以外のユーザーにも良好な応答を得るには、AJAXでフォームの属性とは異なるURLを使用することをお勧めしますaction。たとえば、追加のクエリパラメーターàlaを使用します?json=1。次に、スクリプトは通常、標準出力を実行し、パラメーターが存在する場合、簡単に解析可能なJSON（たとえば、現在の応答テキストとステータスコードの両方を含む連想配列）を返すことができます。jQueryのAJAXインターフェースは、指示があれば、応答をJSONとして自動的に解析できます。

于 2012-06-04T21:04:52.383 に答える
1

これが、AJAX呼び出しの初期化における成功/エラーオブジェクトの目的です。3つの失敗ケースを追加する必要があります。最初の2つの失敗ケースはsuccess、どちらもサーバー側の問題が原因で、ajax呼び出しを介して発生します。2番目のエラーケースerrorは、ajax呼び出しの場合です。また、Webサービスは成功パラメーターを返す必要があります。あなたが説明したことを達成するためにあなたのコードをこのようなものに変えてください：

$('.submit').click(function() {
    $('div.load').html('<img src="images/load.gif" alt="Loading..." id="loading" />'); 

    //creation of variables to send
    var name = $('#name').val();
        email = $('#email').val();
        phone = $('#phone').val();

    $.ajax({
        url: 'mail.php',
        type: 'POST',
        data: 'name=' + name + '&email=' + email + '&phone=' + phone,

        success: function(result) {
            if (result) {
                if (result.success) {
                    $(".contact").append("<img src='OK.jpg'>");
                    $('p.error,p.correct').remove();
                    $('.contact').append(result);
                    $('#loading').fadeOut(500, function() {
                        $(this).remove();
                    });
                } else { // The server returned data, but there was an error on the server side.
                    $(".contact").append("<img src='BAD.jpg'>");
                }
            } else { // The server had a problem and didn't return any data.
                $(".contact").append("<img src='BAD.jpg'>");
            }
        }
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            // There was an error in the AJAX call.
            $(".contact").append("<img src='BAD.jpg'>");
        },
    }
});

    return false; 
});

また、dataパラメータを間違って使用しています。上記の例のデータセクションを無視して、これをデータとして使用します。

data: {
    name: name,
    email: email,
    phone: phone
}

これは、JavaScriptオブジェクトを理解していない人には奇妙に見えます。同じ名前で変数を定義する理由を説明してほしい場合は、お知らせください。例：name: name。

于 2012-06-04T21:09:06.917 に答える