2

同じページの jQuery スクリプトにデータを渡すフォームがあります。フォームは次のようになります。

<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<input type="radio" name="favourites" value="all" checked="checked"> all tracks &nbsp&nbsp<input type="radio" name ="favourites" value="favourites"> favourites only<br><br>
<input type="submit" name="submit" id="filter" class="submit" value="filter"><br>
</form>

お気に入りの値は、同じページのヘッドにある jQuery スクリプト内で PHP によって取得され、MySQL クエリが動的に生成されます。しかし、これはページがリロードされるために発生します。可能であれば、AJAX を使用して、ページをリロードせずにフォーム データ/変数を jQuery スクリプトに渡したいと思います。AJAX を使って html や css を操作できることは承知していますが、head 内で jQuery スクリプトを操作することはできますか? もしそうなら、どうすればいいですか？

4

3 に答える 3

3

簡単にするために、フォームに一意の ID を付けてから、この目的のために設計された AJAX ファイルに jquery ポストを作成します。

例：

HTML

<form id="postForm" method="POST">
    <input type="radio" name="filter" value="1" /> Only favorites
    <input type="radio" name="filter" value="2" /> Everything
    <input type="submit" name="postFormSubmit" />
</form>

jQuery

$('form#postForm').submit(function(e){
    e.preventDefault(); //Prevents a page reload
    var filter = $(this).find("input[@name=filter]:checked").val(); //Gets the value of "filter"
    $.post("/path/to/ajax.php",{filterType:filter},function(){
        // Callback, could make the data output attach to this.
    });
});

それが私が少なくとも始めるところです:)

于 2012-08-11T20:35:16.537 に答える
3

これを見てください。コードは次のようになります。

HTML:

<form id="postForm" method="POST">
    <input type="radio" name="filter" value="1" /> Only favorites
    <input type="radio" name="filter" value="2" /> Everything
    <input type="submit" name="postFormSubmit" />
</form>

Javascript:

jQuery("#postForm").submit(function(event){
    event.preventDefault();
    jQuery.post("/ajax.php", jQuery("#postForm").serialize(), function(){
    //done
    });
}
于 2012-08-11T20:51:56.913 に答える
1

自分で書きたくない場合は、このプラグインに興味があるかもしれませんhttp://jquery.malsup.com/form/

于 2012-08-11T22:26:37.747 に答える