时间戳

首页 > 解决方案 > 当单击按钮删除但数据无法删除且 url 未显示 id 时我遇到问题

ajax - 当单击按钮删除但数据无法删除且 url 未显示 id 时我遇到问题

问题描述

我试图解决这个问题几个小时，但我从来没有解决这个问题

我的代码有问题，当我单击 json 中的删除按钮时，我无法从控制台获取 ID 只是链接，如下所示：

例子 ：

我粘贴一些代码来检查：

控制器request.php：

public function delete()
{
    // $this->m_request->delete($this->input->post('id_form'));
    $id = $this->input->post('id_form');
    $data = $this->m_request->DeleteRequest($id);
    echo json_encode($data);
}

型号m_request.php：

public function DeleteRequest($id)
{
    $hasil = $this->db->query("DELETE FROM request WHERE id_form='$id'");
    return $hasil;
}

然后查看（我只是放了模态脚本和ajax json脚本）：

模态视图：

<div class="modal fade" id="ModalHapus" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Hapus Request</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
        </div>
        <form class="form-horizontal">
            <div class="modal-body">

                <input type="hidden" name="kode" id="textkode" value="">
                <div class="alert alert-warning">
                    <p>Apakah Anda yakin mau menghapus request ini?</p>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
                <button class="btn_hapus btn btn-danger" id="btn_hapus">Hapus</button>
            </div>
        </form>
    </div>
</div>

Ajax/JSON 脚本：

 //GET HAPUS
    $(document).on('click', '.hapus', function() {
        var id = $(this).attr('data');
        $('#ModalHapus').modal('show');
        $('[name="kode"]').val(id);
    })

    // Hapus Request
    $('#btn_hapus').on('click',function(e){
        e.preventDefault();
        var id = $('textkode').val();
        $.ajax({
            type: "POST",
            url: "<?= site_url('request/delete')?>",
            dataType: "JSON",
            data: {id:id},
            success: function(data){
                // $('#ModalHapus').modal('hide');
                console.log(data)
                load_data();
            }
        });
        return false;
    })

标签： ajaxcodeignitercrud

解决方案

ajax 请求可能不起作用的原因有很多。我首先想到的是，您没有指定输入表单的 ID 和方法。确保您的 HTML 表单标签中同时包含两者。例如：

<form id=“id_form” method=“post” class=“...”&gt;
...
    <input type="text" name="kode" id="textkode">
</form>

在您的 JS 代码中执行以下操作

$.ajax({
        type: "POST",
        url: "<?= site_url('request/delete')?>",
        dataType: "JSON",
        data: $(“#id_form”).serialize(),
        success: function(data){
            console.log(data)
            load_data();
        }
        error: function(xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nERROR: "+ err);
        }
});

还将您的删除功能更改为：

public function deleteTableRow()
{
    $id = $_POST['textkode'];  // Because I'm not sure what this->input->post() makes
    $result = $this->m_request->DeleteRequest($id);
    echo json_encode(array('id' => $id, 'result' => $result)); // The contents of array should then be displayed in the console of your webbrowser
}

请注意，我更改了函数名称。对于其他程序员来说，这可能会产生很大的误导，因为 delete 在许多编程语言中用作动态对象的析构函数！

此外，我建议创建一个 ajax.php 文件来解析不同类型的 ajax 请求。该文件也可以用作控制器，但仅用于 ajax 调用。如果您有多个表单，则代码更具可读性。

推荐阅读