第1部分:jQuery-> MySQL-> jQuery->的HTML [英] Part 1: jQuery -> MySQL -> jQuery -> HTML

问题描述

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

I'm developing an application which relies heavily on jQuery for user interaction.
(and if you're browser doesn't support jQuery, then upgrade or don't use my application :)

通常，它们具有从表中获取，设置和删除数据的功能.

As normal, one have functions to GET, SET and DELETE data from a table.

在我的应用程序中，我正在获取和设置很多信息，而无需重新加载页面.为此，我主要使用jQuery.post.

In my application, I'm GET'ing and SET'ing a lot of information without page reload. To do this, I mostly use jQuery.post.

我的JS文件中的典型代码如下:

A typical code in my JS file looks like this:

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
}

这是我的问题:

Here's my question:

1. 这是JS文件和jquery_getset_data.php之间交互的更好方法吗?

1. Is tehre a better way for interaction between JS file and jquery_getset_data.php?

如何在createStoreList中动态调用不同的删除项目"函数?请参阅更新1.

How can I dynamically call different "remove item" functions inside createStoreList? See update 1.

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

Update 1: This is the code that I use to create many different lists.

  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语句.我已经对其进行了测试，并且可以正常工作.

Update 2 I figured I just could use switch statements. I've tested it and it works.

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

推荐答案

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

In order to reduce the jquery_getset_data.php I would use the OOP design patterns to avoid switches and if statements.

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( );

我知道看起来很复杂，但我的品味看起来要好得多. 关于第二个问题，我不确定我是否理解，您能添加更多的解释吗?

I know looks complicated, but for my taste looks much better. And regarding your second question I'm not sure I understood it, can you add more explanation?

我看到你更新后，我认为第二个问题可以解决:

After I saw you update, I think for second question you can do:

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

实例"是函数名称，或者您可以稍后对其进行更新或附加以使其成为函数名称；

There the "instance" is the function name, or you can update or append it latter to make it be the function name;

这篇关于第1部分:jQuery-> MySQL-> jQuery->的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！