0

Jqueryは初めてで、JqueryAjax呼び出しはさらに新しいです-これが私の問題です：

私は小さなフォーム（メールアドレス送信）を持っています。これは、メールをテーブルに挿入するPHPファイルを起動します。

私は次のことをしたい：

  1. 更新がないようにAjaxを介してフォーム送信を処理します
  2. テーブルへの書き込みに成功した後、送信ボタンのテキストを「成功！」に変更したいと思います。3秒間待ってから、fadeInおよびfadeOutエフェクトを使用して「サインアップ」に戻ります。

フォームのコードは次のとおりです。

<form action="" id="registerform" name="registerform" method="post" >
    <input type="text" id="email" name="email" value="Email Address" onClick="empty()" onBlur="determine()" />
    <button id="join" type="submit" name="join" onClick="validate()">Sign Up</button>
</form>

Jqueryを介してPOSTリクエストを処理する私のひどい試みは次のとおりです。

$('form').on('submit', function(e) {
    $.post('register.php', function() {
            $('#join').html('Success!')             
    });        
    //disable default action
    e.preventDefault();
});

誰かがAjaxリクエストを機能させる方法についてコメントできますか（そうではないようです）？

前もって感謝します！

アップデート

了解しました。次のJqueryのブロックでデータがテーブルに追加されますが、ボタンのテキストは変更されません。

 $('form').on('submit', function(e) {
        $.post('register.php', $("#registerform").serialize(), function() {
            $('#join').html('Success!')             
        });        
    //disable default action
    e.preventDefault();
    });

今何かアイデアはありますか？

4

4 に答える 4

3

これが私のajax呼び出しの例です

details = "sendEmail=true&" + $("form").serialise();

$.ajax({
    url: "yourphppage.php",
    type: "post",
    data: details,
    success: function (data, textStatus, jqXHR) {
        if (data == "false") {
            console.log("There is a problem on the server, please try again later");    
        } else {
                //Do something with what is returned
        }
    }
})

そしてサーバー側で

if (isset($_POST['sendEmail'])) {
  //Do something with the data
}

もちろん、これは単なる例であり、ニーズに合わせてこれを変更する必要があるかもしれません:)

注意すべきことの1つは、何をするかif (data == "false")です。サーバー側echo "false"では、ajax呼び出しが成功しなかったことを伝えることができます。

于 2012-05-30T20:27:03.260 に答える
1

実際にはサーバーにデータを送信していません。データを送信するには、の「data」パラメータを使用する必要があり$.postます。

$('form').on('submit', function(e) {
    $.post('register.php', $(this).serialize(), function() {
        $('#join').html('Success!');             
    });        
    //disable default action
    e.preventDefault();
});
于 2012-05-30T20:31:57.200 に答える
0

わかりませんが、POSTリクエストは何かを送信しますか？POSTリクエストにデータを追加してみてください。

$('form#registerform').submit(function() {
  var email = $(this).find('input[name=email]').val();
  $.post('register.php', {email: email}, function() {
    $('#join').html('Success!');             
  }); 

  return false;
});
于 2012-05-30T20:32:32.430 に答える
-1

ajax呼び出しでフォームデータをサーバーにプッシュする場所はどこですか？コードをこれに変更します。

var data = {$("#email").val()};
$('form').submit(data ,function(e) {
    $.post('register.php', function() {
            $('#join').html('Success!')             
    });        
    //disable default action
    e.preventDefault();
});
于 2012-05-30T20:23:21.130 に答える