Ajax 未从 codeigniter 中的模态表单发送序列化数据

Question

我无法从模态表单中将序列化数据发送到控制器，我正在使用 codeigniter 和 ajax 发送数据

这是我在模态中的表单：

<div class="modal fade" id="nuevoClienteModal" tabindex="-1" role="dialog" aria-labelledby="Nuevo Cliente" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalNuevoCliente">Alta de Cliente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <form id="formularioCliente" name="formularioCliente" method="post" action="cliente/insertar_cliente">

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Nombre del Cliente</span>
                        </div>
                        <input type="text" id="nombreCliente" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                    </div>

                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                        Ingrese hasta 8 correos electronicos del cliente para que recibiran las notificaciones.
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Correo Elecrtonico 1</span>
                        </div>
                        <input type="text" id="correo1" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Correo Elecrtonico 2</span>
                        </div>
                        <input type="text" id="correo2" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Correo Elecrtonico 3</span>
                        </div>
                        <input type="text" id="correo3" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Correo Elecrtonico 4</span>
                        </div>
                        <input type="text" id="correo4" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Correo Elecrtonico 5</span>
                        </div>
                        <input type="text" id="correo5" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Correo Elecrtonico 6</span>
                        </div>
                        <input type="text" id="correo6" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Correo Elecrtonico 7</span>
                        </div>
                        <input type="text" id="correo7" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                    </div>

                    <div class="input-group input-group-sm mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-sm">Correo Elecrtonico 8</span>
                        </div>
                        <input type="text" id="correo8" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" id="btnInsertarCliente" class="btn btn-primary">Aceptar</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../js/cliente_ajax.js"></script>

这是我的 Ajax 文件：

$(document).ready(function(){
    $('#btnInsertarCliente').click(function(){
      var url = "cliente/insertar_cliente";
      var postData = $("#formularioCliente").serializeArray();
      $.ajax({                        
            type: 'POST',                 
            url: url,
            cache: false,                     
            data: postData,
            success: function(data)             
            {
                alert(data);
            },error: function(data){                      
                alert(data);
         }
      });
      return false;
    });
});

这是我的控制器：

class Cliente extends CI_Controller {

public function __construct()
    {
            parent::__construct();
            $this->load->model('cliente_model');
    }


public function index()
{   

    $this->load->view('cliente_view');

}

public function insertar_cliente()

{   

    $nomCliente = $this->input->post('nombreCliente');
    $correo1 = $this->input->post('correo1');
    $correo2 = $this->input->post('correo2');
    $correo3 = $this->input->post('correo3');
    $correo4 = $this->input->post('correo4');
    $correo5 = $this->input->post('correo5');
    $correo6 = $this->input->post('correo6');
    $correo7 = $this->input->post('correo7');
    $correo8 = $this->input->post('correo8');

    $data = array(
   'nombreCliente' => $nomCliente ,
   'correoCLiente1' => $correo1 ,
   'correoCLiente2' => $correo2 ,
   'correoCLiente3' => $correo3 ,
   'correoCLiente4' => $correo4 ,
   'correoCLiente5' => $correo5 ,
   'correoCLiente6' => $correo6 ,
   'correoCLiente7' => $correo7 ,
   'correoCLiente8' => $correo8 ,
   'statusCliente' => 'Activo'
    );

    print_r($data);
    $insertstatus=$this->cliente_model->nuevoCliente($data);
    if($insertstatus)
    {
    echo "Success";
    }
  }
}

这是我的模型：

class Cliente_model extends CI_Model {

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

    public function nuevoCliente($data) {

     $insertde = $this->db->insert('cliente', $data); 
     return $insertdet;

    }
}

问题是控制器没有接收到我发布的数据，当我从控制器打印 $data 数组时，我收到：

Array
(
    [nombreCliente] => 
    [correoCLiente1] => 
    [correoCLiente2] => 
    [correoCLiente3] => 
    [correoCLiente4] => 
    [correoCLiente5] => 
    [correoCLiente6] => 
    [correoCLiente7] => 
    [correoCLiente8] => 
    [statusCliente] => Activo
)

还有来自数据库的这个错误：

Error Number: 1048

Column 'nombreCliente' cannot be null

INSERT INTO `cliente` (`nombreCliente`, `correoCLiente1`, `correoCLiente2`, `correoCLiente3`, `correoCLiente4`, `correoCLiente5`, `correoCLiente6`, `correoCLiente7`, `correoCLiente8`, `statusCliente`) VALUES (NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, 'Activo')    

您知道为什么 Ajax 不从表单发送序列化数据吗？我也使用了 serialize() 和 serializeArray 并且没有将数据发送到控制器。

Answer 1

您缺少<input> 元素上所有重要的name。如果没有name，该输入的值将不会被提交...或序列化。

name 成为键/值对的键

添加名称属性后使用serialize()