CodeIgniter + jQuery .ajax 表单在表格行中提交返回结果

Question

我认为这应该很容易，我根本找不到答案。

我正在为一个简单的 CRUD 应用程序使用 Codeigniter。它在表格中显示结果。我所做的是使用 jQuery .ajax 提交表单。它（几乎）完美地工作。

我可以在不重新加载的情况下提交表单，但除非我重新加载页面，否则结果不会显示。现在我使用location.reload();，但它没有意义，毕竟我的意图不是重新加载页面。

我知道我应该回显数据，但不知道如何使用 CI 执行此操作。

一些内幕：

jQuery 部分

$("#add_form").submit(function(e) {
    e.preventDefault();
    var dataString = $("#add_form").serialize();
    $.ajax({
        type: "POST",
        url: "add",
        data: dataString,
        success: function() {
            $("#lightbox").fadeIn(300).delay(1000).fadeOut(300);
            $("#notification-box").show();
            $("#notification-box").html('<p>Saving</p>');
        $("#addrow").hide();

        location.reload();
        }

    });
});

控制器部分

function add()
{
    if(!$this->ion_auth->logged_in())
    {
        redirect('auth/login', 'refresh');
    }else
    {
        // User ID
        $user_data = $this->ion_auth->get_user();
        $user = $user_data->id;

        // Prepare post data
        $data['user'] = $user; 
        $data['cdate'] = date('Y-m-d');
        $data['ctime'] = date('H:i:s');
        $data['mdate'] = date('Y-m-d'); 
        $data['mtime'] = date('H:i:s');
        $pair_value = $this->input->post('vpair');
        if(empty($pair_value))
        {
            $data['pair'] = "no pair";
        }else
        {
            $data['pair'] = $pair_value;
        }

        $reason_value = $this->input->post('reason');
        if(empty($reason_value))
        {
            $data['reason'] = "";
        }else
        {
            $data['reason'] = $reason_value;
        }
        $comment_value = $this->input->post('comment');
        if(empty($comment_value))
        {
            $data['comment'] = "";
        }else
        {
            $data['comment'] = $comment_value;
        }
        // Insert_data
        $this->journal_model->add_trade($data);
   }
}

帮助？任何人？

干杯，

/J

Answer 1

我不确定您在实际示例中是如何显示数据的，我猜测它在标准 HTML 表格标签内的表格。

我个人会在成功函数中附加一个新表行，为此（而不是调用重新加载）让您的 CI 添加控制器函数在添加函数末尾回显表行（有点脏，更好的方法是让 CI 返回数据，然后使用视图对其进行格式化 - 但这应该可行）

因此，在 add 函数的末尾，会回显表格行的 HTML，包括表单中的新值。

在JS中将成功函数改成这样：

    success: function(data) {
        $("#lightbox").fadeIn(300).delay(1000).fadeOut(300);
        $("#notification-box").show();
        $("#notification-box").html('<p>Saving</p>');
        $("#addrow").hide();

        if (data != 'error')
        {
             $('#tableid').append(data);
        }
        else
        {
             //handle your error here
        } 
    }

如果处理您的表单时出现错误，请回显“错误”，JS 可以按照您的意愿处理，否则会将新的表格行附加到表格上。

Answer 2

这是我为发票应用程序编写的内容，可以帮助您解决问题，而不是将序列化数据传递回页面，只需使用显示视图的控制器函数传递整个 dom 元素，或者（在我的情况下）该函数只返回一个数字，我在 jquery 中构建 html 以附加到表格主体，如下所示：

/* user clicks the button */
$('#button_add_item_submit').click(function(event){

    /* prevent the page from scrolling to top via the # href */
    event.preventDefault();

    /* code to grab text input from the dom */

    /* ajax post */
    $.post('/invoice/index.php/create/add_item',{date:item_date,description:item_description,price:item_price,invoice_id:scraped_id},function(response){
        if(response!=''){
            /* inject response into the table, i named the table body #invoice_body */
            $('#invoice_body').append('<tr id="item_' + response + '"><td>' + item_date + '</td><td>' + item_description + '</td><td>$' + item_price + '.00</td></tr>');
        }
    });

});