ajax CodeIgniter 的数据插入问题

Question

我一直在尝试通过 CodeIgniter Controller 将数据插入数据库。我已经通过 ajax 中的响应进行了验证过程并收到验证错误。但是似乎当表单中的所有字段都被填充时，如果我点击任何输入字段，数据就会被插入，甚至没有点击表单中的保存或提交按钮。

因此，如果我按名称字段、颜色字段或价格字段，则无需按“保存汽车”按钮即可插入数据。

**我的控制器：CarModel.php**

<?php
class CarModel extends CI_Controller
{

    public function index()
    {
        $this->load->view('car_model/list.php');
    }
    public function showCreateForm()
    {
        $html = $this->load->view('car_model/create', '', true);
        $response['html'] = $html;
        echo json_encode($response);
    }
    public function saveModel()
    {
        $this->load->model('Car_model');

        $this->load->library('form_validation');
        $this->form_validation->set_rules('name', 'Name', 'required');
        $this->form_validation->set_rules('color', 'Color', 'required');
        $this->form_validation->set_rules('price', 'Price', 'required');
        if ($this->form_validation->run() == true) {
            //save enteries to DB
            $formArray = array();
            $formArray['name'] = $this->input->post('name');
            $formArray['color'] = $this->input->post('color');
            $formArray['transmission'] = $this->input->post('transmission');
            $formArray['price'] = $this->input->post('price');
            $formArray['created_at'] = date('Y-m-d H:i:s');
            $this->Car_model->create($formArray);
            $response['status'] = 1;
        } else {
            $response['status'] = 0;
            $response['name'] = strip_tags(form_error('name'));
            $response['color'] = strip_tags(form_error('color'));
            $response['price'] = strip_tags(form_error('price'));
        }
        echo json_encode($response);
    }
}

我的模特：Car_model.php

<?php

class Car_model extends CI_Model {
    public function create($formArray){
        $this->db->insert('car_models',$formArray);
    }
}

list.php文件中的ajax代码。代码如下：

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Optional JavaScript -->


    <title>Ajax Crud</title>
</head>

<body>
    <div class="header">
        <div class="container">
            <h3>
                Ajax CodeIgniter CRUD
            </h3>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h3>Car Models</h3>
            </div>
            <div class="col-md-6 text-right"><a href="javascript:void();" class="btn btn-primary text-right" onclick="showModel()">Create</a></div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <table class="table table striped">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Color</th>
                        <th>Transmission</th>
                        <th>Price</th>
                        <th>Created Date</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="createCar" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Create Model</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div id="response"></div>
            </div>
        </div>
    </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        function showModel() {
            $("#createCar").modal("show");
            $.ajax({
                url: '<?php echo base_url('CarModel/showCreateForm'); ?>',
                type: 'POST',
                data: {},
                dataType: 'json',
                success: function(response) {
                    console.log(response);
                    $("#response").html(response["html"]);
                }
            })
        }
        $("body").on("click", "#createCarModel", function(e) {
            e.preventDefault();

            $.ajax({
                url: '<?php echo base_url('CarModel/saveModel'); ?>',
                type: 'POST',
                data: $(this).serializeArray(),
                dataType: 'json',
                success: function(response) {

                    if (response['status'] == 0) {
                        if (response["name"] != "") {
                            $(".nameError").html(response["name"]).addClass('invalid-feedback d-block');
                            $("#name").addClass('is-invalid');
                        } else {
                            $(".nameError").html("").removeClass('invalid-feedback d-block');
                            $("#name").removeClass('is-invalid');
                        }

                        if (response["color"] != "") {
                            $(".colorError").html(response["color"]).addClass('invalid-feedback  d-block');
                            $("#color").addClass('is-invalid');
                        } else {
                            $(".colorError").html("").removeClass('invalid-feedback d-block');
                            $("#color").removeClass('is-invalid');
                        }

                        if (response["price"] != "") {
                            $(".priceError").html(response["price"]).addClass('invalid-feedback  d-block');
                            $("#price").addClass('is-invalid');
                        } else {
                            $(".priceError").html("").removeClass('invalid-feedback d-block');
                            $("#price").removeClass('is-invalid');
                        }
                    } else {
                        $(".nameError").html("").removeClass('invalid-feedback d-block');
                        $("#name").removeClass('is-invalid');

                        $(".colorError").html("").removeClass('invalid-feedback d-block');
                        $("#color").removeClass('is-invalid');

                        $(".priceError").html("").removeClass('invalid-feedback d-block');
                        $("#price").removeClass('is-invalid');
                    }
                }
            })
        });
    </script>
</body>

</html>

请帮我解决一下。谢谢。

Answer 1

尝试将您的点击选择器更改为您的提交按钮 ID。

Answer 2

我找到问题了。出现问题是因为我将整个表单设置为插入操作的事件侦听器。我需要在中使用 submit 而不是 click 第 $("body").on("click", "#createCarModel", function(e) { 行。所以，我把它改成了$("body").on("submit", "#createCarModel", function(e) {。然后问题就停止了。

感谢所有帮助过我的人。

ajax CodeIgniter 的数据插入问题

ajax data insert problem with CodeIgniter

php

ajax

jquery

codeigniter