在这个例子中，让 jQuery/Ajax 与 CodeIgniter 一起工作的最佳方法是啥？

Posted 2023-02-24

【中文标题】在这个例子中，让 jQuery/Ajax 与 CodeIgniter 一起工作的最佳方法是啥？

【英文标题】：What is the best way to get jQuery/Ajax to work with CodeIgniter in this example?在这个例子中，让 jQuery/Ajax 与 CodeIgniter 一起工作的最佳方法是什么？

【发布时间】：2010-11-06 08:16:12

【问题描述】：

我在尝试让 CodeIgniter 和 jQuery 生成 ajax 功能时遇到问题。我整天都在编码，学习 jQuery，并且通常会被踢。让我分解一下情况，希望有人有勇气帮助我。

我有一个故障单系统，它在一个页面上显示许多故障单...每个故障单都嵌套在多个 div 中，如下所示：

<div class="eachticketwrapper" id="ticket-362">
   <div class="actionlog">
        <form action="<?= base_url();?>admin/updateticket/362" method="post" id="362" name="362">
           <ul class="displayinline">
           <p>Action Log:
           <span class="actionlog-362">
                <?php echo $actionlog; ?>
            </span>
            </p>
   </div> <!--actionlog-->
            <p>
        <textarea name="actionlogbox362" cols="100" rows="2" id="actionlogbox362" style="" ></textarea>
        </p>
            <div class="finalbuttons">
                <?php echo form_open('admin/updateticket/'.'362'); ?>
            <li><?php 
                            $attrib = "class='updatebutton-362' id='updatebutton-362'";
                            echo form_submit("RapidTask",'Update',$attrib); //setup the button, and set permissions. ?></li>
                <?php echo form_close(); // close the form. ?>
             </div> <!--finalbuttons-->
</div> <!--eachticketwrapper-->

运行时，$actionlog 应该类似于以下内容：

worker - 2009-06-25 18:15:23 - Received and Acknowledges Ticket.
worker - 2009-06-25 18:15:23 - Changed Status to In Progress
worker - 2009-06-25 18:15:46 - Changed Priority to High
worker - 2009-06-25 18:15:46 - Changed Category to Network Connection Problem
worker - 2009-06-25 18:17:16 - did something

然后是一个文本区域和一个更新按钮。

这是我的补充 jQuery 文件的内容：

$(document).ready(function() 
    $('.updatebutton-362').click(function()
        
            var id = $(this).attr("id").split("-"); // Split the id value at the hyphen, and grab the ticketnum.
            $('.actionlog-'+id[1]).load('http://localhost/ci/index.php/ajaxtestc/');  // do something...
            return false; // return false so default click behavior is not followed.
        );
);

ajaxtestc 控制器如下所示：

function index()
    
        $data['actionlog'] = $this->m_tickets->actionLogPull(362);
        $this->load->vars($data);
        $this->load->view('content/ajaxtestform');
    

m_tickets 模型如下所示：

function actionLogPull($requestedNum=NULL)
    
        $this->db->where('ticketnum', $requestedNum); // Grab only the status for the ticket requested $requestednum=NULL
        $requestedTicket = $this->db->get('tickets'); // set the initial ticket info to a variable
        $returnvalue = $requestedTicket->row('actionlog');
        return $returnvalue;
    

现在...这就是我想要的。我想单击更新按钮，让它获取工作人员在文本区域中输入的任何内容，将其添加到数据库中现有日志的末尾，然后刷新屏幕上的操作日志。

我想不出一个明确的方法来做到这一点。谁能阐明我如何开始这个过程？

非常感谢任何帮助，并在此先感谢。

【问题讨论】：

哇，除了代码清理的需要，我每天都在使用 CI 和 jQ，我可以告诉你的第一件事就是感受将数据回显到 ajax 控件。首先设置一个简单的视图来执行简单的 $.ajax 或 $.getJSON 请求。如果您直接使用 ajax，请将数据类型设置为 json。第二个通过echo(json_encode($theArrayOfData));在php中返回一个数据数组。如果您使用 getJSON 或 ajax 数据类型作为 json，那么 .success() 将拥有数组的 json 对象，但是，如果您想使用 .complete，则需要在 data.responseText 上使用 $.parseJSON

【参考方案1】：

在$('.updatebutton-362').click 中，将.load() 行更改为（将名称、ID 替换为您要发送的任何参数）：

$.post('http://localhost/ci/index.php/ajaxtestc/', 
    name: "John Doe", id: "anything",
    function(data) 
      $('.actionlog-'+id[1]).html(data);
    
);

然后在ajaxtestc 控制器中index() 中的所有内容之上，解析_POST 变量并调用模型中的任何函数来更新操作日志。

index() 操作显示的任何内容都将加载到 actionlog 范围中。

【讨论】：

啊哈！这正是我想要的！谢谢吉米！

【参考方案2】：

首先，您的代码看起来很乱。第一个标签似乎未闭合，而 form_open 嵌套在其中。 我开发网络的经验法则是，首先让它在没有任何 javascript 的情况下工作。然后添加 javascript 作为更好的体验。 在上述情况下，尝试使用旧方式构建表单，提交后，重定向到您想要的页面。之后运行良好，一次添加一个 jquery。使用 jquery 表单插件提交表单。在控制器中添加一个简单的检查来处理 ajax 请求。 我一般使用json提交表单，所以在controller中，我会返回一个json_encode数组给ajax提交的表单请求。

希望对您有所帮助。

【讨论】：

您好，唐尼，感谢您的回复。代码看起来很乱，但这主要是因为我删除了与这个问题无关的部分。代码现在可以在没有 jQuery 的情况下完美运行，但我正在尝试在不刷新页面的情况下进行更新。