7

私がやりたいのは、ユーザーがフォーラムの送信ボタンをクリックしたときに、収集されたデータをphpスクリプトに送信し、理想的には同じページにとどまるようにすることです。現在、私はフォームにいます（フォームには他のタグがありますが、これらは私が焦点を当てる必要がある2つのことです）

<form name = "reply" id="replyForm" action="sqlinserter.php" method = "POST">
<button id = "newThread" class="btn btn-primary" type="submit">Submit</button>

ご覧のとおり、ユーザーが送信ボタンをクリックしたときにデータをsqlinserter.phpに送信するフォームを使用しています。基本的なフォームのもの。現在、[送信]をクリックすると、データベースにデータを送信しているだけなので、空白の実際のsqlinsert.phpページに移動します。

ただし、ajaxを使用してデータを送信するボタンをクリックする簡単なjqueryスクリプトを作成したいと思います。私は、twitterブートストラップがボタンで異なる動作をすることに気づいていて、jqueryでそれらのボタンを使用する方法がわかりません。これに関するどんな助けも素晴らしいでしょう。

それで、

  1. jqueryでtwitterブートストラップボタンを使用する方法を理解する必要があります。具体的には、送信ボタンの使い方を理解する必要があります。
  2. ajaxを使用してデータを送信する方法は？
4

3 に答える 3

11
  1. jqueryでtwitterブートストラップボタンを使用する方法を理解する必要があります。具体的には、送信ボタンの使い方を理解する必要があります。

ブートストラップはjQueryと一緒に使用でき、追加の手順は必要ありません。実際、ブートストラップ自体でさえ、フレームワークでjQueryを使用しています。

通常どおりjQueryを使用でき、通常どおりブートストラップを使用できます。どちらも競合することなく機能します。

  1. ajaxを使用してデータを送信する方法は？

これは、たとえば、jQueryAJAX関数の1つを使用して実行できます$.ajax。

clickボタンに新しいイベントを追加するだけ#newThreadです。イベントハンドラー内にAJAXを記述します。コードに基づく例を以下に示します。

HTML

<form name = "reply" id="replyForm" action="sqlinserter.php" method = "POST">
    <button id = "newThread" class="btn btn-primary" type="submit">Submit</button>
</form>

JS

$(function() {
    $('#newThread').on('click', function (e) {
        e.preventDefault(); // disable the default form submit event

        var $form = $('#replyForm');

        $.ajax({
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize(),
            success: function (response) {
                alert('response received');
                // ajax success callback
            },
            error: function (response) {
                alert('ajax failed');
                // ajax error callback
            },
        });
    });
});
于 2013-03-21T01:59:47.007 に答える
2

Twitterのブートストラップボタンを使用する特定の方法はありません。この送信のIDを取得し、以下のようにajaxを介してデータを送信します。

$.ajax({
            type:'GET',
            dataType:'xml',
            url:'path/to/phpfile.php',
            success:function(data) {
                // Do the handling here
            },
            error:function() {
                alert("Sorry, Ajax call Failed");  
            }
        });
于 2013-03-21T01:42:01.850 に答える
0

ブートストラップを使用したフォーム送信に固有のものはありません。ボタンがフォームに挿入されていることを確認する必要があります（ブートストラップでなくても必要です）。

<form name = "reply" id="replyForm" action="sqlinserter.php" method = "POST">
<button id = "newThread" class="btn btn-primary" type="submit">Submit</button>
</form>

終了</form>タグがありません

于 2013-03-21T01:55:21.820 に答える