如何将codeigniter与ajax连接起来答案

【问题标题】：how to connect codeigniter with ajax如何将codeigniter与ajax连接起来
【发布时间】：2019-10-09 07:50:44
【问题描述】：

我需要将 codeigniter 与 ajax 帖子连接

第一个问题是jquery.min.js的使用，如果你使用ajax你不能使用这个版本的jquery，你需要使用完整版。
然后我尝试将所有的 jquery 代码分段执行以测试其功能。
我认为问题出在 ajax 调用的 url 或控制器中

这是我的看法（很简单）

<form action="#" id="form">
    <label for="">nombre</label>
    <input type="text" name="nombre" id="nombre">

    <label for="">apellido</label>
    <input type="text" name="apellido" id="apellido">

    <label for="">cedula</label>
    <input type="text" name="cedula" id="cedula">

    <label for="">direccion</label>
    <input type="text" name="direccion" id="direccion"><br>

    <button class="btn btn-info" id="btn" type="submit">enviar</button>
</form>

jquery 代码

$(document).ready(function () {
    $("#btn").on('click', function (e) {
    // var data = $("#form").serialize();
    // alert("datos:" + data);
        $.ajax({
            url: '<?php echo base_url('myController/formAjaxCrear')?>',
            type: 'POST',
            data: $("#form").serialize(),
            dataType: 'json',
            success: function (data) {
                alert(data.nombre);
            },
            error: function () {
                alert("something is wrong");
            }

        });
    });
});

myController文件中的我的控制器

public function formAjaxCrear(){
    $data = [
        'nombre' => $this -> input -> post('nombre'),
        'apellido' => $this -> input -> post('apellido'),
        'cedula' => $this -> input -> post('cedula'),
        'direccion' => $this -> input -> post('cedula'),
    ];

    echo json_encode($data);

}

我希望在浏览器弹出窗口中收到：Jessica，如果我用该信息填写输入名称。为什么我只收到错误消息？

【问题讨论】：

控制台的网络选项卡中的 AJAX 调用的状态是什么。 404 还是 500？
我得到这个信息：ibb.co/KK0WCB4
我正在测试失败函数，它告诉我请求的 JSON 解析失败
您在“网络”选项卡中的请求出于某种原因是 GET 而不是 POST
添加了答案。这应该对您有所帮助。

标签： ajax codeigniter

【解决方案1】：

对您的代码进行以下更改

您的按钮类型为提交，这实际上是提交表单。您可以通过 2 种方式进行更改。要么改变 JS 方法

一）

    $("#btn").on('click', function (e) {
         e.preventDefault();  //This will prevent submitting of form.

b) 您也可以通过将按钮类型从提交更改为仅按钮来完成此操作

<button class="btn btn-info" id="btn" type="submit">enviar</button>

上面改为

<button class="btn btn-info" id="btn" type="button">enviar</button>

为了获得更好的标准，您应该明确告诉 CodeIgnitor 返回 AJAX 数据。您可以通过在 formAjaxCrear 方法中进行以下更改来做到这一点。

  header('Content-Type: application/json'); //This sends Headers and make sure that data type returned is JSON.
  echo json_encode($data);

【讨论】：