javascript - 将JS knockout 到mysql数据库以获取动态值不起作用

我无法将brandName的值发送到数据库。我正在尝试使用ajax将数据发送到。我还有一个addBrandName按钮，当单击该按钮时会添加新字段，这意味着我想一次将insert多个输入值输入数据库。但是到目前为止，我对此有疑问。有什么问题的建议或如何解决？这是演示的fiddle。

我的html部分是：

<button data-bind='click: addBrandName'>Add a brand</button>
<table data-bind="foreach: brandNames">
   <tbody>
      <td>
         <label>Brand name</label>
         <input type="text" data-bind='value: brandName'>
      </td>
   </tbody>
</table>
<button data-bind="click: addToDB">Add to database</button>

和脚本：

var brandNamesModel = function(brandNames) {
    var self = this;
    self.brandNames = ko.observableArray(ko.utils.arrayMap(brandNames));

    self.addBrandName = function() {
        self.brandNames.push({
            brandName: ""
        });
    };
};

this.addToDB = function() {
    var toDB = {
        'bName': this.brandName()
    };

    $.ajax({
        url: 'action.php',
        type: 'POST',
        data: {
            'detail': toDB,
            'action': 'insert'
        },
        success: function() {
            self.brandName("");
        }
    });
};

ko.applyBindings(new brandNamesModel());

action.php是：

<?php
$db = new MySqli('localhost', 'ashonko', '', 'tutorials');

$action = (!empty($_POST['action'])) ? $_POST['action'] : '';
$detail = (!empty($_POST['detail'])) ? $_POST['detail'] : '';

if (!empty($detail)) {
    $bName = $detail['bName'];
}

switch ($action) {
    case 'insert':
        $db->query("INSERT INTO products SET name = '$bName'");
        break;
}
?>

最佳答案

brandName中没有brandNamesModel属性。因此，当您在此处访问this.brandName()时：

var toDB = {
    'bName': this.brandName()
};

引发错误。 brandName是集合brandNames的每个项目的属性。因此，如果要保存添加到集合中的最新项目，可以将其更改为：

this.addToDB = function() {
    if(this.brandName().length == 0)
        return;

    // gets the last brandName entered
    var toDB = {
        'bName': this.brandNames()[this.brandNames().length -1].brandName
    };

    $.ajax({
        url: 'action.php',
        type: 'POST',
        data: {
            'detail': toDB,
            'action': 'insert'
        },
        success: function() {
            // this will also throw an error
            self.brandName("");
        }
    });
};

Here's a fiddle用于测试以上代码。

但是您需要更改输入的逻辑。您应该只有一个输入，而不是每个td中都有一个输入。像这样：

<label>Brand name</label>

<!--This one is outside the foreach. Refers to the brandNamesModel-->
<input type="text" data-bind='value: brandName'>

<button data-bind='click: addBrandName'>Add a brand</button>
<table>
  <thead>
    <tr>
      <th>Brand Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: brandNames">
    <tr>
      <!--This brandname is referring to property in the array-->
      <td data-bind="text:brandName">
      </td>
    </tr>

  </tbody>
</table>
<button data-bind="click: addToDB">Add to database</button>

这是一个fiddle证明这一点。