javascript - 使用 Codeigniter 通过 CSS 按钮颜色更改来更新 AJAX 数据库

Question

我在这里看到了一些不错的帖子，其中包含我正在尝试做的事情的点点滴滴，但没有涉及所有领域。有没有人有任何代码示例或建议来帮助我做我想做的事？

首先，我将使用一组数据构建我的 MVC View ，例如 (org name, id, status)，其中 status 是一个 bool 值，可以选择或未选择。但是，我不想显示一个复选框，而是想根据数据库值的状态显示一个显示绿色(选中)或红色(未选中)按钮的特定按钮。 CSS 不是问题。

然后，如果当用户单击按钮时，我想将 div 值从红色更改为绿色(反之亦然)，同时通过 AJAX 调用更新数据库字段中的 bool 值。最好尽可能利用 JQuery。

最后，我需要知道如何使用 CodeIgniter 来完成这一切。我精通 CI，但是 Javascript/JQuery 新手 - 在这一点上是头灯中的鹿。任何人都可以指出我正确的方向或建议一个网站，其中包含一些示例代码接近我正在尝试做的事情或明显的资源以外的好资源吗？谢谢你。

Answer 1

好的，所以 CodeIgniter 是一个 PHP 框架 - 这意味着它可以在服务器端运行。 (我知道，那里有一个 ajax 库，但我不使用它。)我们必须了解服务器端和客户端之间的区别。您的 javascript 是客户端。我通常在没有 javascript 的情况下在 codeigniter 中开发所有东西，然后返回并添加 javascript 位。这有助于我确保系统适用于那些没有打开 javascript 或出于任何原因无法执行 javascript 的人。 (顺便说一句，这叫做 progressive enhancement )。

所以，首先，让我们处理非 JavaScript 版本: 您只需要在单击时为红色/绿色按钮提供一个 url，该 url 指向 Controller 方法，该方法将更新数据库记录并将您重定向回您之前所在的页面(具有红色/绿色按钮)。

/controller/method.html 是我们的 Controller 方法，它将保存到数据库并重定向回此页面。 -->

<a href="/controller/method.html" class="red my-button">Check</a>

现在，让我们来处理 js 版本:

在你看来，你只需要劫持点击，发送ajax请求，并根据 Controller 方法的结果改变红色/绿色按钮。因此，我们所做的是防止链接将页面重定向到 href 属性 (e.prevendDefault())。然后，我们获取 href 的值并对该 Controller 方法进行 ajax 调用。该方法将确定这是否是一个 ajax 请求并保存到数据库，然后回显“成功”消息。 成功后，我们可以在客户端更新可视化组件。

$('.my-button').live('click', function(e) {
    e.preventDefault();
    $.ajax({
        // $(this).attr('href') gets the value of the links href attribute 
        // which is "/controller/method.html" in this case
        url: $(this).attr('href'), 
        success: function(data) {
           // update your button with whatever html to write the new button
           $('.my-button').replaceWith('<a href="/controller/method.html" class="red my-button">Check</a>');
        }
    });
});

您的 Controller 方法只是检查它是否是一个 ajax 请求。如果是，则返回成功，如果不是则重定向页面。

function my_controller_method()
{
    if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
        $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") {

        // update your database
        echo "success";
    }else{
        // redirect back to page
        redirect($_SERVER[‘HTTP_REFERER’]);
    } 
}