PHP/AJAX表单提交问题：仅指定表单触发无刷新提交

步骤1：给目标表单加唯一标识 #

给需要触发功能的表单添加id属性，用来精准定位它：

<form id="favorite-movie-form" style="display: inline-block;">
    <input style="display: none" type="text" name="title" value="<?php echo $title; ?>" />
    <input style="display: none" name="favorite" value="favorite" />
    <input style="color: #c0bfbf; padding: 0px 6px; background-color: transparent; border: 1px solid #c0bfbf; border-radius: 6px;" name="submit" type="submit" value="MY LIST"><?php } ?>
</form>

步骤2：修改JavaScript代码，只监听目标表单 #

把原来选中所有form的选择器改成你刚加的ID，同时调整数据序列化的对象，另外建议把click事件换成submit事件，更贴合表单提交的逻辑：

<script>
$(function () {
    // 仅选中指定id的表单
    $('#favorite-movie-form').on('submit', function (event) {
        event.preventDefault(); // 阻止页面刷新

        $.ajax({
            type: 'POST',
            url: 'ajax/post.php',
            data: $(this).serialize(), // 只序列化当前表单的数据
            success: function () {
                alert('Movie added to your list.');
            }
        });
    });
});
</script>

核心修改点说明 #

• #favorite-movie-form选择器只会匹配你指定的表单，不会影响页面其他表单
• 监听submit事件比click更合理：不管是点击提交按钮还是按回车提交，都能触发功能
• $(this)指代当前触发事件的表单，确保提交的是这个表单里的内容，不会混入其他表单的数据

内容的提问来源于stack exchange，提问作者colemaniac