我可以通过表单数据/变量使用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/