Question

在订单页面上，有3个按钮

[新订单] [处理] [已完成]

如果我点击处理按钮 - 按钮的背景应该改变。它还会将订单状态更新到数据库。

默认情况下，[新订单]按钮将具有绿色背景。如果单击[处理]按钮，背景颜色将变为绿色。 [新订单]将不再具有背景颜色。

使用Jquery Ajax处理此问题的最佳方法是什么？

Answer 1

做你所描述的...... 我会启动你的。我不想做你所有的工作！：d

在html中

<input id="processing" type="button" />
<input id="newOrder" type="button" />

脚本中的

$(document).ready(function() {
  $('input#newOrder').click(function(){
    $(this).css([changeBg]);
    $.ajax({
      url: "[pageToHandleUpdate]",
      data: "[update DB data]",
      success: function(){ //this is what I do after finishing the ajax call...
        $(this).css([change the style]);
        $('#newOrder').css([changeBg]);
      }
    });
    return false;
  });
});

[...]不完整。

Answer 2

使用jQuery的css和get/post函数....

HTML：

<button class="button">New Order</button>
<button class="button">Processing</button>
<button class="button">Completed</button>

CSS：

button.button {
    background-color:#fff;
    border:thin solid #000;
}
button.button:first-child {
 background-color:green;   
}

JS：

$(document).ready(function() {
    $("button.button").click(function() {
      $("button.button").css("background-color","#fff");
      $(this).css("background-color", "green");
        $.post("updateOrder.php", {orderStatus: $(this).text()}, function(data) {
           //database updated completion logic here 
        });
    });
});

多个状态按钮 - 背景颜色

2 个答案: