Question

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

我使用Codeigniter进行简单的CRUD应用程序。它在表格中显示结果。我做的是使用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表格标签。

我个人会在success函数中添加一个新表行，为此（而不是调用reload）获取你的CI添加控制器函数来回显add函数末尾的表行（它有点脏，更好的方法是让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>');
        }
    });

});

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

2 个答案: