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>

收藏夹的值随后由 PHP 在同一页面头部的 jQuery 脚本中检索，该脚本动态生成 MySQL 查询。但发生这种情况是因为页面被重新加载。如果可能的话，我想使用 AJAX 将表单数据/变量传递给 jQuery 脚本而不重新加载页面。我知道我可以使用 AJAX 操作 html 和 css，但我也可以在头部操作 jQuery 脚本吗？如果是这样，我将如何处理？

4

3 回答 3

3

为简单起见，给表单一个唯一的 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.
    });
});

这就是我至少要开始的地方:)

于 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 回答