Codeigniter AJAX 从 MySQL 数据库获取数据而不刷新的正确方法

Posted 2023-02-24

技术标签:

【中文标题】Codeigniter AJAX 从 MySQL 数据库获取数据而不刷新的正确方法【英文标题】：Correct way for Codeigniter AJAX get data from MySQL database without refreshing 【发布时间】：2015-05-31 21:23:43 【问题描述】：

我目前正在尝试使用 AJAX 和 jQuery 来完成一些基本任务，而无需离开网页。我的目标是查询数据库上的表并将该信息附加到列表中而不刷新页面。

 <button class="button radius" id="btnList">Current Items</button>

这是我的具有 ID 的按钮。 ("触发按钮");

我的脚本是这样的

$('#btnList').click(function(e)
    $.ajax(
        url:"<?php echo base_url();?>/cashbook/get_item",
        datatype:'json',
        type:"POST",
        success: function(result)
            alert(result);
            $.each(result.results,function(item)
                $('ul').append('<li>' + item + '</li>')
            )
        
    )
    $('#div_list').toggle(900)
)

我的目标是当按钮被点击时，它会触发并发挥它的魔力并返回数据并将其附加到一个列表中，完成后会打开一个包含该列表的 Div。问题是我收到一个错误 “TypeError: undefined is not an object (evalating 'a.length')” 我的控制器

function get_item()


    $data = $this -> M_cashbook -> cashbook_items();

    echo json_encode($data);

我不确定我在控制器中所做的是否正确，但是当它设置为 echo 或 print 时，它会返回 jSon 字符串并在警报中标记，但如果更改，也会作为文本显示在我的屏幕顶部返回 json_encode 警报显示空白，没有 Json 没有任何作用。

我做错了吗？如果，那么实现我想做的事情的正确方法是什么。

谢谢

更新：

function cashbook_items()

    $this -> db -> select('name');
    $this -> db -> from('items');
    $query = $this -> db ->get();

    return $query -> result();

这是我的模特

这是我的两个控制器功能，第一个是页面的默认加载，它调用第二个来获取内容，第二个只是做繁重的工作来调用数据库并返回数据

function items()


    $data['items'] = $this ->get_item();
    $this->load->view('/holders/header');
    $this->load->view('/cash/v_cashbook_items_page',$data);
    $this->load->view('/holders/footer');


function get_item()


    $data = $this -> M_cashbook -> cashbook_items();

    echo json_encode($data);

最后是视图

    <style>
    ul 
        list-style-type: none;
    
</style>
<div align="center" style="padding-top: 1%" id="div_main">
    <div class="jumbotron">
        <h1>Cashbook Items</h1>

        <p>Add items to to cashbook so they used <br>when adding incomings and out goings later</p>

        <form id="items_form" data-abide>
            <div class="large-3 large-centered columns">
                <label>New Item Name
                    <input type="text" required name="item" id="item_name">
                </label>
                <small class="error">No item added</small>
            </div>

            <button class="button radius" id="btnItem">Submit</button>
        </form>
        <a href="#" data-reveal-id="firstModal" class="radius button" id="btnList">Item List</a>
    </div>

</div>

<div class="row">
    <div id="firstModal" class="reveal-modal" data-reveal align="center">
        <h3>Current Items</h3>

        <p>Reccuring Items in the database</p>
        <ul id="list_item">
        </ul>
    </div>
</div>
</div>
<br>

<script>

    $('#btnList').click(function (e) 
        $.ajax(
            url: "<?php echo base_url();?>/cashbook/get_item",
            dataType: 'text',
            type: "POST",
            success: function (result) 
                var obj = $.parseJSON(result);
                $.each(obj, function (index, object) 
                    $('#list_item').append('<li>' + object['name'] + '</li>');
                )
            
        )
    )

    $('#items_form').submit(function (e) 
        e.preventDefault();
        var data = $('#item_name').val();
        alert(data);
        $.ajax(
            url: "<?php echo base_url();?>/cashbook/new_item",
            type: 'POST',
            data: "item=" + data,
            success: function () 
                alert('THIS WORKED');

            ,
            error: function () 
                alert('Nah died');
            

        );
    )
</script>

【问题讨论】：

这不是我对 URL 所做的吗？ /cashbook/get_item cashbook 是控制器，get_item 是cashbook 内的函数？你能告诉我们你的模型吗？ datatype:'json' 应该是 dataType:'json'。注意大写的“T”。删除了我的评论。误读代码 【参考方案1】：

你可以使用 result_array();如果您要检索多行。它将返回纯数组。

function cashbook_items()

    $this -> db -> select('name');
    $this -> db -> from('items');
    $query = $this -> db ->get();

    return $query -> result_array();

那么在你看来：

$('#btnList').click(function(e)
    $.ajax(
        url:"<?php echo base_url();?>/cashbook/get_item",
        dataType:'text',
        type:"POST",
        success: function(result)
            var obj = $.parseJSON(result);
            console.log(obj);
           // $.each(result.results,function(item)
           //     $('ul').append('<li>' + item + '</li>')
           // )
        
    )
    $('#div_list').toggle(900)
)

您可以使用console.log(obj);检查 obj 返回的内容

$.parseJSON(result); will result in the conversion of the encoded json to an array of object.

如果要访问 Parsed JSON，请使用 ff。

obj[0]

这表示您将返回查询的第一行。

obj[0]['name'];

要访问各个列，您可以使用该列的名称。您在模型中声明的内容。

$('#btnList').click(function(e)
    $.ajax(
        url:"<?php echo base_url();?>/cashbook/get_item",
        dataType:'text',
        type:"POST",
        success: function(result)
            var obj = $.parseJSON(result);
            $.each(obj,function(index,object)
                $('ul').append('<li>' +object['name']+ '</li>');
            )
        
    )
    $('#div_list').toggle(900)
)

编辑：

在你看来。

  <style>
    ul 
        list-style-type: none;
    
</style>
<div align="center" style="padding-top: 1%" id="div_main">
    <div class="jumbotron">
        <h1>Cashbook Items</h1>

        <p>Add items to to cashbook so they used <br>when adding incomings and out goings later</p>

        <form id="items_form" data-abide>
            <div class="large-3 large-centered columns">
                <label>New Item Name
                    <input type="text" required name="item" id="item_name">
                </label>
                <small class="error">No item added</small>
            </div>

            <button class="button radius" id="btnItem">Submit</button>
        </form>
        <a href="#" data-reveal-id="firstModal" class="radius button" id="btnList">Item List</a>
    </div>

</div>

<div class="row">
    <div id="firstModal" class="reveal-modal" data-reveal align="center">
        <h3>Current Items</h3>

        <p>Reccuring Items in the database</p>
        <ul id="list_item">
        </ul>
    </div>
</div>
</div>
<br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 
<!--dont forget to add your jquery if you are using jquery functions and methods! -->
<script>
$(document).ready(function() //remember to put document.ready function when you are using jquery then insert your jquery functions inside.
    $('#btnList').on('click',function ()
        $.ajax(
            url: "<?php echo base_url();?>index.php/cashbook/get_item",
            dataType: 'text',
            type: "POST",
            success: function (result) 
                var obj = $.parseJSON(result);
                $.each(obj,function(index, object) 
                    $('#list_item').append('<li>' + object['name'] + '</li>');
                );
            
        )
    );


    $('#items_form').submit(function (e) 
        e.preventDefault();
        var yourItem = $('#item_name').val();
        $.ajax(
            url: "<?php echo base_url();?>/cashbook/new_item",
            type: 'POST',
            data: data:yourItem,
            success: function (data) 
                alert('THIS WORKED');

            ,
            error: function () 
                alert('Nah died');
            

        )
    );

);
</script>

你的控制器：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class cashbook extends CI_Controller
    function __construct() 
        parent::__construct();
            $this->load->helper('url');
            $this->load->database();
            $this->load->model('M_cashbook');
    

    function index()
        $this->load->view('load_your_view_here'); //load your view here if you are using index as your default action when loading the default controller.
    

    function items()
        $data['items'] = $this ->get_item();
        $this->load->view('/holders/header');
        $this->load->view('/cash/v_cashbook_items_page',$data);
        $this->load->view('/holders/footer');
    

    function get_item()
        $data = $this->input->post('data');
        $data = $this -> M_cashbook -> cashbook_items();
        echo json_encode($data);

【讨论】：

感谢您的想法，当在我的控制器中使用带有 echo/print 的代码示例时，文本仍位于页面顶部，但 console.log 显示多个对象，单击时会显示每一行.但是出现了 a.legnth 错误。当在控制器中改回返回时，我收到一个错误 [Error] SyntaxError: JSON Parse error: Unexpected EOF parse (jquery.js, line 25) parseJSON (jquery.js, line 25) success (items, line 87) k ( jquery.js，第 24 行）fireWith（jquery.js，第 24 行）c（jquery.js，第 25 行）（匿名函数）（jquery.js，第 26 行）点击感谢这确实有助于显示数据，但现在我遇到了一个问题，即子对象由于回显/打印而被固定到页面顶部，如果我更改为返回，我会得到没有儿子对象 @Riemm1991 在将数据传递给视图时在控制器中使用此格式：echo json_encode($data); 嗨，再次感谢您的回复，我已经这样做了，它确实返回了 JSON 并且它是可用的，但是它自己的对象正在我的标题上方回显，就好像我正在使用 print_r 调试它一样，这是如果我回显或打印它 @Riemm1991 您的控制器中的某些功能可能与对象相呼应，请仔细检查。或将您的整个控制器张贴在这里，以便我们看到。谢谢。

以上是关于Codeigniter AJAX 从 MySQL 数据库获取数据而不刷新的正确方法的主要内容，如果未能解决你的问题，请参考以下文章

如何从codeigniter控制器接收ajax响应？

codeigniter php 和 jquery - 如何从多个表中获取数据并通过 ajax 返回

如何在codeigniter中使用ajax在mysql数据库中插入数据？

CodeIgniter 和 AJAX 表单提交

Codeigniter - 如何从 ajax 获取数据表数据？

如何从codeigniter中的模型生成json格式