Question

我不知道为什么我没有得到它。无论哪种方式，这让我感到沮丧。我查看了2本jquery书籍，网页教程和堆栈溢出帖子，我仍然不明白。

我正在尝试构建一个搜索过滤条，用户可以在其中选择过滤器，点击“精简结果”后，它会修改查询输出。

如何使用jquery / ajax将用户选择的任何形式单选框的值提交到php页面，该页面将根据输入显示结果，而不刷新页面。

表 - ＆GT;
用户选择单选按钮值并单击提交 - ＆gt;
表单数据通过jquery / ajax发送到.php页面，其输出将在没有页面刷新的情况下显示 - ＆gt;
.php文件处理用户输入并基于它创建输出

我老实地看了很多不同的答案，但所有人都认为读者比我更了解javascript / jquery的基本知识。

喜欢，我是否必须将jQuery / ajax放在运行“onclick”提交按钮的函数中？或者我只是为我的按钮ID添加.click事件处理程序？

假设我是一个完整的jQuery / ajax noob，有人可以解释一下吗？

Answer 1

单击提交按钮时，您只需将ajax调用附加到来自表单的“submit”事件：

$('form').submit(function(e){
    e.preventDefault();
    $('.content').load(this.action+" .content", $(this).serialize(), function(){
        // code to execute after result display if needed
    });
    return false;
});

我假设您的结果显示在具有“内容”类的元素中。

$('form')选择您的表单，您可以将其个性化
.submit将事件处理程序附加到“提交事件
e.preventDefault()和return false阻止表单实际提交
$('.content').load将使用带有ajax调用结果的“content”类填充元素
this.action是将表单提交到
" +.content"此处仅从响应中提取结果部分，而不是整个html页面
$(this).serialize()将表单字段数据传递给ajax请求
最后在显示结果后调用最后一个匿名函数，可以用来触发一些表明结果已更新的视觉效果

如何使用jquery-ajax提交表单数据？

1 个答案: