AJAX数据库更新与CSS按钮颜色改变使用Codeigniter

AJAX database update with CSS button color change using Codeigniter

本文关键字：改变 Codeigniter 颜色 按钮 数据库 更新 CSS AJAX      更新时间：2023-09-26

我在这里看到了一些关于我正在尝试做的事情的好帖子，但没有解决所有领域的问题。有没有人有任何代码示例或建议，以帮助我做我想做什么?

首先，我将用数据数组(如(org name, id, status)构建我的MVC视图，其中status是布尔值，选择或未选择。但是，我不想仅仅显示一个复选框，而是希望根据数据库值的状态显示一个绿色(选中)或红色(未选中)的按钮。CSS不是问题。

然后，当用户单击按钮时，我想将div值从红色更改为绿色(反之亦然)，但也要通过AJAX调用更新数据库字段中的布尔值。在可能的情况下最好使用JQuery。

最后，我需要知道如何使用CodeIgniter来完成这一切。我很精通CI，但Javascript/JQuery新手-鹿在这一点上的头灯。有人能指出我在正确的方向或建议一个网站与一些示例代码接近我想做什么或一个好的资源，而不是显而易见的?谢谢。

好，CodeIgniter是一个PHP框架-这意味着它工作在服务器端。(我知道，那里有一个ajax库，但我不使用它。)我们必须理解服务器端和客户端之间的区别。你的javascript是客户端。我通常在codeigniter中开发所有没有javascript的东西，然后返回并添加javascript位。这有助于我确保系统的工作为那些没有javascript打开，或不能执行javascript的任何原因。(顺便说一句，这被称为渐进增强)。

那么，首先，让我们关注一下非javascript版本:你只需要给你的红色/绿色按钮一个url，当点击指向控制器方法，将更新数据库记录，并重定向到你以前的页面(其中有红色/绿色按钮)。

/controller/method.html是我们的控制器方法，它将保存到数据库并重定向到该页。——> 

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

现在，让我们关注js版本:

在视图

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

$('.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>');
        }
    });
});

你的控制器方法只是检查它是否是一个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’]);
    } 
}

你想要的是大拇指/喜欢的东西…链接中包含了一个演示http://www.geertdedeckere.be/lab/themeforest/thumbsup/demo/

相关文章：