javascript - 如何使用jquery ajax和codeigniter执行编辑和删除操作

Question

Controller 名称:产品

Controller 代码如下:

<?php

class Product extends CI_Controller {

    function __construct() {
        parent::__construct();

        $this->load->helper('form');
        $this->load->helper('url');
        $this->load->helper('html');
        $this->load->model('product_model');
        $this->load->library('form_validation');
    }

    public function test() {
        $this->load->view('productlist');
    }

    public function add() {
        $this->form_validation->set_rules('product_name', 'Product Name', 'required');
        $this->form_validation->set_rules('product_category', 'Product Category', 'required');

        if ($this->form_validation->run() == FALSE) {
            echo validation_errors('<li>', '</li>');
        } else {
            $this->product_model->add($_POST);
        }
    }

    public function displaylist() {
        $result = $this->product_model->displaylist();
        echo json_encode($result);
    }

}

?>

下面是 View 层

查看:ProductList.php

<form id="myForm" method="post" action="<?php echo site_url(); ?>/Product/add">
    <div id="myModal" class="modal fade" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="exampleModalLabel">New Product</h4>
                </div>
                <div class="modal-body">
                    <div id="message" class="text-danger"></div>
                    <label>Product Category:</label>
                    <select class="form-control" id="product_category" name="product_category" id="product_category" value="<?php echo set_value('product_category'); ?>">
                        <option selected="selected" value="Mobile">Mobile</option>
                        <option value="Computer">Computer</option>
                        <option value="Cloths">Cloths</option>
                    </select>
                    <label>Product Name:</label>
                    <input type="text" class="form-control" name="product_name" id="product_name" value="<?php echo set_value('product_name'); ?>" required="">
                </div>
                <div class="modal-footer">
                    <button type="button" name="submit" id="save_change" class="btn btn-primary" value="">Add Product</button>
                    <button type="button" name="cancel" id="cancel" class="btn btn-default" value="">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th><input type="checkbox" id="master"></th>
                <th>Product Category</th>
                <th>Product Name</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody id="demo">
        </tbody>
        <tfoot>
            <tr>
                <td><button type="button" class="btn btn-danger" id="delete_data"><span class="glyphicon glyphicon-remove"></span></button>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

这是 javascript 文件，所以请检查我的 javascript ajax 代码 Javascript文件名:practice.js

var productList = {
mode: "Add",
id: "",
add: function () {
    $.ajax({
        url: base_url + "Product/add",
        type: "POST",
        data: $("#myForm").serialize(),
        success: function (data) {
            $('#myModal').modal('hide');
            productList.list();
        }
    });

    this.clearName();
    //this.list();
},
list: function () {
    $.ajax({
        url: base_url + "Product/displaylist",
        beforeSend: function (xhr) {
            $("#demo").empty();
        },
        success: function (result) {
            var obj = JSON.parse(result);
            // console.log(obj);
            var out;
            var i;
            for (i = 0; i < obj.length; i++) {
                var category = '<tr>'
                        + '<td> <input type="checkbox" class="sub_chk"> </td>'
                        + '<td>' + obj[i].product_category + '</td>'
                        + '<td>' + obj[i].product_name + '</td>'
                        + '<td>'
                        + '<a href="#" data-toggle="modal" data-target="#myModal" data-category=' + obj[i].product_category + ' data-name=' + obj[i].product_name + ' data-id= ' + obj[i].product_id + '>'
                        + '<span class="glyphicon glyphicon-pencil"></span></a>'
                        + '</td>'
                        + '<td>'
                        + '<a href="#!">'
                        + '<span class="glyphicon glyphicon-trash"></span></a>'
                        + '</td>'
                        + '</tr>';

                $("#demo").append(category);


            }

        }

    });

},

fillData: function (name, category) {
    $("#product_category").val(category);
    $("#product_name").val(name);
},
clearName: function () {
    $("#product_name").val('');
    }
}
$(document).ready(function () {

        productList.list();

        productList.modal = $("#myForm");
        $("#save_change").click(function () {
            if (productList.mode == "Add") {
                productList.add();
            }
            else {
                productList.edit();
            }

        });

        $("body").on('click', '.glyphicon-pencil', function () {
            productList.fillData($(this).parent().data('name'), $(this).parent().data('category'));
        });
    });

ScreenShot for Product Table

ScreenShot for add product

我的问题:如何编写 jquery ajax 代码。所以检查我的ajax代码

Answer 1

添加产品后，您可以重新加载产品列表。

 $(document).ready(function () {
        productList.list();
        productList.modal = $("#myForm");
        $("#save_change").click(function () {
            if (productList.mode == "Add") {
                productList.add();
                $('#demo').html('');
                productList.list();
            }
        });
    });