第 1 部分：jQuery -> MySQL -> jQuery -> HTML

Question

我正在开发一个严重依赖 jQuery 进行用户交互的应用程序。
（如果您的浏览器不支持 jQuery，请升级或不要使用我的应用程序 :)

通常，具有从表中获取、设置和删除数据的函数。

在我的应用程序中，我在不重新加载页面的情况下获取和设置大量信息。为此，我主要使用 jQuery.post。

我的 JS 文件中的典型代码如下所示：

jQuery.post("mypath/jquery_getset_data.php", { instance: 'getItems_A', itemID: itemID_value},
  function(data) {
    populateItemList(data);
  }); 

jquery_getset_data.php 包含许多 if 语句：

if($_POST['instance'] == 'getItems_A'){
  // PHP code to get and process data from MySQL DB
}

if($_POST['instance'] == 'setItems_A'){
  // PHP code to process and insert data to MySQL DB
}

这是我的问题：

1. js文件和jquery_getset_data.php交互是不是更好？

2. 如何在 createStoreList 中动态调用不同的“删除项目”函数？请参阅更新 1。

更新 1： 这是我用来创建许多不同列表的代码。

  function createStoreList(data)
  {
    var ul = jQuery("<ul/>");

    // We need to build the html structure in order for this to be registered in DOM.
    // If we don't, jQuery events like .click, .change etc. will not work.      
    for (var i = 0; i < data.length; i++)  
    {
      ul.append(
         jQuery("<li/>")
         .attr("id", "listItem_"+data[i].id)
         .append(jQuery("<span/>")
            .addClass("btnRemoveItem")
            .attr("title", "Remove store from list")
            .attr("id", data[i].id)
            .click(function() { removeItemA(this); })  
          )
         .append(data[i].name + ', ' + data[i].street)
        );              
    }
    return ul;  
  }

更新 2 我想我可以使用 switch 语句。我已经测试过了，它可以工作。

    .click(function() {
        switch(instance)
        {
          case 'removeListItemA': removeListItemA(this); break; 
          case 'removeListItemA': removeListItemB(this); break;
          case 'removeListItemA': removeListItemC(this); break;
        }
    })

Answer 1

为了减少 jquery_getset_data.php，我会使用 OOP 设计模式来避免 switch 和 if 语句。

class ICommand
{
     public:
          function execute( );
};

class CommandGetItemA
{
     public:
           function execute( )
           {
               //do some staff here
           };
};

然后：

CommandsMap['getItemA'] = new CommandGetItemA( );
CommandsMap['setItemA'] = new CommandGetItemB( );
....

CommandsMap[ $_POST['instance']].execute( );

我知道看起来很复杂，但我的口味看起来好多了。 关于你的第二个问题，我不确定我是否理解它，你能补充更多解释吗？

看到你更新后，我认为第二个问题你可以这样做：

.click(function() {
      window[instance]( this);   
});

这里的“instance”是函数名，也可以在后面更新或追加，使其成为函数名；

Answer 2

我唯一要改变的是 jquery_getset_data.php 我会使用 switch 语句而不是许多 if 语句。 jQuery 的 $.post 方法非常适合您正在做的事情，它使用 GET ajax 方法之一（$.load 或 $.get）与影响数据库（删除/更新/等）的脚本交谈会破坏 HTTP 规范。