php - CodeIgniter 和 AJAX 表单提交

Question

我正在尝试将从表单提交的数据保存到我的 mysql 数据库中，然后用最后发布的项目更新 div 元素到 div 中的列表。

现在我只是想得到回复，我现在不担心格式是否正确。

我的问题是表单不会使用 e.preventDefault(); 提交到位，但如果没有它，表单将执行发布到数据库然后刷新页面的正常方法。

这是我的 AJAX 调用:

$(document).ready(function() {

    $('form#feedInput').submit(function(e) {

        e.preventDefault();

        $.ajax({
            type: "POST",
            url: "<?php echo site_url('dashboard/post_feed_item'); ?>",
            data: $('.feed-input').val(),
            dataType: "html",
            success: function(data){
                debugger;
                $('#feed-container').prepend(data);
            },
            error: function() { alert("Error posting feed."); }
       });

    });
});

我认为我没有必要发布我的 Controller 代码，因为我的问题是表单无法通过 e.preventDefault();功能。

如果 e.preventDefault() 我怎样才能让这个表单通过 AJAX 提交？功能正在它到达 $.ajax() 之前停止它功能？

Answer 1

ajax 调用的data 属性无效。它应该是 JSON 格式 { key: $('.feed-input').val() } 或查询格式 'key='+$('.feed-input ').val().在成功方法中还有一个不必要的 debugger 变量。

工作代码可以是:

$('form#feedInput').submit(function(e) {

    var form = $(this);

    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "<?php echo site_url('dashboard/post_feed_item'); ?>",
        data: form.serialize(), // <--- THIS IS THE CHANGE
        dataType: "html",
        success: function(data){
            $('#feed-container').prepend(data);
        },
        error: function() { alert("Error posting feed."); }
   });

});