我可以通過表單數據/變量使用AJAX在jQuery腳本PHP？

Question

我有數據傳遞給同一頁上的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> 

的收藏價值，然後通過一個PHP腳本的jQuery內的同一頁，其中動態生成一個MySQL查詢的頭檢索。但是，這是因爲頁面被重新加載。如果可能的話，我想使用AJAX將表單數據/變量傳遞給jQuery腳本，而不用重新加載頁面。我知道，我可以操縱使用AJAX HTML和CSS，但我還可以操縱頭的jQuery腳本？如果是這樣，我該怎麼辦呢？

Answer 1

爲簡單起見，給形成獨特的ID，然後只需做一個jQuery的崗位爲此而設計的一個AJAX文件。

例子：

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. 
    }); 
}); 

這就是我ATLEAST開始:)

Answer 2

看看this。代碼會像這樣。

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 
    }); 
} 

Answer 3

如果你不想把它寫在你自己的，你可能有興趣在這個插件http://jquery.malsup.com/form/