发出AJAX请求codeigniter后未调用成功函数答案

【问题标题】：Success function not being called after making AJAX request codeigniter发出AJAX请求codeigniter后未调用成功函数
【发布时间】：2021-09-13 18:03:49
【问题描述】：

当我从视图进行 AJAX 调用并将表单数据传递给控制器时。我有几个问题。首先，success 中的代码永远不会执行，其次，即使是 AJAX 调用，也会刷新页面。谁能告诉我我哪里做错了？

从昨天开始，我看到了很多问题，但没有一个能够解决我的问题。

型号代码

public function insert_user($name, $email) {
    $data = array();
    $data['name'] = $name;
    $data['email'] = $email;
    $data['created_at'] = date('y-m-d');

    $this->db->insert('all_users', $data);
    return true;
}

控制器代码

public function insert_user () {
    $data = $this->input->post();
    $name = $data['name'];
    $email = $data['email'];
    $this->User_model->insert_user($name, $email);
    $this->load->view('view');
}

Ajax 请求代码

const insertBtn = $(".insert-btn");
insertBtn.on("click", function () {
                const name = $(".insert-form input[type=name]");
                const email = $(".insert-form input[type=email]");
                $.ajax({
                   url: "<?php echo base_url() ?>index.php/Users/insert_user",
                   type: "post",
                   data: {name, email},
                   dataType: "json",
                   success: function () {
                       $("body").append("Request made successfully");
                   } 
                })
            });

我的表单看起来像这样：

<form class="insert-form" action="<?php echo base_url() ?>index.php/Users/insert_user" method="post">
        <input type="text" name="name" placeholder="Enter name">
        <input type="email" name="email" placeholder="Enter email">
        <button class="insert-btn">Insert Data</button>
    </form>

注意：我能够成功地将数据插入数据库。

【问题讨论】：

您的$this->load->view('view'); 视图文件中有什么内容？是 JSON 数据吗？你的 dataType: "json", 告诉 jQuery 它是。尝试删除 dataType: "json", 看看是否可以解决问题。
view 包含从表单获取输入值的 ajax 代码。我正在准确地获取数据
去掉dataType: "json",行还能用吗？
您是如何提交表单的，您是点击按钮还是回车？
不，那样不行。此外，我在 jQuery 中获取数据时犯了一个错误，但即使这样也不能解决问题。我正在单击按钮提交表单。

标签： ajax codeigniter

【解决方案1】：

浏览器在您的 AJAX 代码有机会运行/完成之前提交表单。

您不想将事件绑定到按钮的click 事件，而是要绑定到表单的submit 事件。然后你要取消浏览器的默认动作。这是通过e.preventDefault(); 方法完成的。

另外，这里不需要dataType: "json"。 dataType 告诉 jQuery 你的 AJAX 调用返回了什么样的数据。您通常不需要它，因为 jQuery 可以自动检测到它。另外，如果您没有返回 JSON 文档，那么这可能会导致问题。

const insertForm = $(".insert-form");
insertForm.on("submit", function (e) {
    const name = insertForm.find("input[type=name]");
    const email = insertForm.find("input[type=email]");

    e.preventDefault();

    $.ajax({
        url: "<?php echo base_url() ?>index.php/Users/insert_user",
        type: "post",
        data: {name, email},
        success: function () {
            $("body").append("Request made successfully");
        } 
    })
});

【讨论】：

但是改代码后页面依然在刷新。
您是否添加了e.preventDefault(); 行？这应该可以防止这种情况发生。
还有一件事。如果我注释掉包含 ajax 请求的脚本，代码仍然有效。这意味着数据仍在被插入到数据库中。
是的，因为浏览器正在提交您的表单。这就是action= 和method= 的作用。这发生在 AJAX 代码能够运行之前。 e.preventDefault(); 告诉浏览器不要提交表单本身。
@ArunBohra 问题出在您的控制器中，您应该将视图回显到 ajax 调用，然后在 DOM 中对其进行处理。读取codeigniter.com/userguide3/libraries/…，使用true作为返回参数

【解决方案2】：

控制器代码

public function insert_user () {
    $data = $this->input->post();
    $name = $data['name'];
    $email = $data['email'];
    $data = $this->User_model->insert_user($name, $email);
    $this->output
    ->set_content_type('application/json')
    ->set_output(json_encode($data));
}

【讨论】：

我想这是为了继续你的其他答案，而不是作为一个独立的答案？如果是这样，请删除它并将上下文添加到另一个答案中，谢谢

【解决方案3】：

Ajax 请求代码

const insertBtn = $(".insert-btn");
insertBtn.on("click", function () {
                const name = $(".insert-form input[type=name]");
                const email = $(".insert-form input[type=email]");
                $.ajax({
                   url: "<?php echo base_url() ?>Users/insert_user", // <?php echo base_url() ?>controller_name/function_name
                   type: "post",
                   data: {name, email},
                   dataType: "json",
                   success: function () {
                       $("body").append("Request made successfully");
                   } 
                })
            });

表单看起来像这样：

<form class="insert-form"  method="post">
        <input type="text" name="name" placeholder="Enter name">
        <input type="email" name="email" placeholder="Enter email">
        <button class="insert-btn">Insert Data</button>
    </form>

【讨论】：

正确的表单应该是输入按钮类型但不提交表单的表单。

【解决方案4】：

页面正在刷新，因为我有一个用作提交按钮的按钮，将其更改为不提交表单的类型按钮的输入，并且我们看不到页面正在刷新。并且发出的 AJAX 请求也运行成功。

<form class="insert-form" action="<?php echo base_url() ?>index.php/Users/insert_user" method="post">
        <input type="text" name="name" placeholder="Enter name">
        <input type="email" name="email" placeholder="Enter email">
        <input type="button" class="insert-btn" value="Insert Data">
</form>

【讨论】：