如何在mySql表中插入knockout生成的JSON数据？

Question

我有一个简单的表单，可以生成'brand name'输入框的knockout.js格式。我已使用JSON从表单生成php。现在，如何将此生成的数据提供给JSON操作文件，以使用{{mySql在'b_names'字段'brand_name'中的php表中插入此<button data-bind='click: addBrandName'>Add a drug</button> <form action="php/action.php"> <table data-bind="foreach: brandNames"> <tbody > <td> <label>Brand name</label> <input type="text" data-bind='value: brandName'> </td> </tbody> </table> <button type="submit">Submit</button> </form> <p> <button data-bind='click: save, enable: brandNames().length > 0'>Save to JSON</button> </p> <div> <textarea data-bind='value: lastSavedJson' rows='10' cols='33'> </textarea> </div> 数据1}}？

这是我的表格：

<script>
   $( document ).ready(function() {
   var initialData = [
   ];

   var brandNamesModel = function(brandNames) {
   var self = this;
   self.brandNames = ko.observableArray(ko.utils.arrayMap(brandNames, function(drug) {
       return { 
           brandName: drug.brandName };
   }));

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

   self.save = function() {
       self.lastSavedJson(JSON.stringify(ko.toJS(self.brandNames), null, 2));
   };

   self.lastSavedJson = ko.observable("")
   };

   ko.applyBindings(new brandNamesModel(initialData));        
   });
</script>

这是剧本：

$dbCon = mysqli_connect(localhost, $user, $password, $database) 
        or die ("error connecting database");
echo "Connected";

$data = file_get_contents($lastSavedJson);
$arrat = json_decode($data, true);

foreach($array as $row)
{
    $sql = "INSERT INTO b_name(brand_name) VALUES('".$row["brandName"]."')";
    mysqli_query($bdCon, $sql);
};

我正在尝试这个php动作，当然它无法正常工作。

{{1}}

我试图理解它，任何帮助都会受到赞赏。 没有这里的PHP是形式的工作小提琴 - fiddle

Answer 1

请以这种方式尝试ajax调用

   $.ajax({
        url: "your api url",
        type: "post",
        data: ko.toJSON(self),
        contentType: "application/json",
        success: function(data){
            console.log(data);
            alert("success");
         },
         error:function(jqXHR, textStatus, errorThrown) {
            alert("failure");
         }   
   });  

在你的php中你应该检查数据是否来自php文件，如下面＆amp;在浏览器控制台上。检查数据即将在控制台中发送。

print_r($_POST['data']);

Answer 2

我从Wern Ancheta的博客获得了最好的帮助。这是一篇很棒的文章，他解释了那里的所有代码。

以下是他如何完成我一直在寻找的工作的版本：

html和knockout代码：

<div class="container" data-bind="load: loadData()">
    <div class="new_student">
        <input type="text" class="name" placeholder="name" data-bind="value: person_name, hasfocus: person_name_focus"/>
        <input type="text" class="age" placeholder="age" data-bind="value: person_age"/>

        <button data-bind="click: createPerson">Create</button>     
    </div>

    <table data-bind="visible: people().length > 0" class="students">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Remove</th>
                <th>Update</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: people">
            <tr>
                <td>
                    <span data-bind="text: name, click: nameUpdating, visible: !nameUpdate()"></span>
                    <input type="text" class="name" data-bind="value: name, visible: nameUpdate, hasfocus: nameUpdate">
                </td>
                <td>
                    <span data-bind="text: age, click: ageUpdating, visible: !ageUpdate()"></span>
                    <input type="text" class="age" data-bind="value: age, visible: ageUpdate, hasfocus: ageUpdate">
                </td>
                <td><a href="#" data-bind="click: $root.removePerson">remove</a></td>
                <td><a href="#" data-bind="click: $root.updatePerson">update</a></td>
            </tr>
        </tbody>
    </table>    

    <button data-bind="click: echoPerson">echo</button>
</div>




<script>
var personModel = function(id, name, age){
    var self = this;
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.age = ko.observable(age);

    this.nameUpdate = ko.observable(false);
    this.ageUpdate = ko.observable(false);

    this.nameUpdating = function(){
        self.nameUpdate(true);
    };
    this.ageUpdating = function(){
        self.ageUpdate(true);
    };

};

var model = function(){

    var self = this;
    this.person_name = ko.observable("");
    this.person_age = ko.observable("");
    this.people = ko.observableArray([]);
    this.person_name_focus = ko.observable(true);

    this.createPerson = function(){
        if(self.validatePerson()){

            var person = {'name' : this.person_name(), 'age' : this.person_age()};

            $.ajax(
                {
                    url: 'refresher_save.php',
                    type: 'POST',
                    data: {'student' : person, 'action' : 'insert'},
                    success: function(id){
                        console.log(this);
                        self.people.push(new personModel(id, self.person_name(), self.person_age()));
                        self.person_name("");
                        self.person_age("");
                    }
                }
            );          

        }else{
            alert("Name and age are required and age should be a number!");
        }
    };

    this.validatePerson = function(){
        if(self.person_name() !== "" && self.person_age() != "" && Number(self.person_age()) + 0 == self.person_age()){
            return true;
        }
        return false;
    };

    this.removePerson = function(person){

        $.post(
            'refresher_save.php', 
            {'action' : 'delete', 'student_id' : person.id()}, 
            function(response){

                self.people.remove(person);
            }
        );
    };


    this.updatePerson = function(person){
        var id = person.id();
        var name = person.name();
        var age = person.age();

        var student = {'id' : id, 'name' : name, 'age' : age};
        $.post(
            'refresher_save.php', 
            {'action' : 'update', 'student' : student}

        );
    };

    this.loadData = function(){
        //fetch existing data from database

        $.ajax({
            url : 'refresher_save.php',
            dataType: 'json',
            success: function(data){


                for(var x in data){
                    var id = data[x]['id']
                    var name = data[x]['name'];
                    var age = data[x]['age'];
                    self.people.push(new personModel(id, name, age));
                }

            }
        });
        /*
        note: nothing would actually show up in the success function if the
        data that was returned from the server isn't a json string
        */
    };


    this.echoPerson = function(){
        console.log(ko.toJS(self.people()));
    };

};

ko.applyBindings(new model());
</script>

服务器端php至connect，insert，update和delete数据为：

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

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


if(!empty($student)){
    $name = $student['name'];
    $age = $student['age']; 
}

switch($action){

    case 'insert':

        $db->query("INSERT INTO students SET name = '$name', age = '$age'"); 
        echo $db->insert_id; //last insert id
    break;

    case 'update':

        $id = $student['id'];
        $db->query("UPDATE students SET name = '$name', age = '$age' WHERE id = '$id'");
    break;

    case 'delete':

        $id = $_POST['student_id'];
        $db->query("UPDATE students SET status = 0 WHERE id = '$id'");
    break;

    default:
        $students = $db->query("SELECT * FROM students WHERE status = 1");
        $students_r = array();
        while($row = $students->fetch_array()){

            $id = $row['id'];
            $name = $row['name'];
            $age = $row['age'];
            $name_update = false;
            $age_update = false;
            $name_focus = false;
            $age_focus = false;

            $students_r[] = array(
                'id' => $id, 'name' => $name, 'age' => $age, 
                'nameUpdate' => $name_update, 'ageUpdate' => $age_update,
                'nameHasFocus' => $name_focus, 'ageHasFocus' => $age_focus
                ); 
        }

        echo json_encode($students_r);
    break;
}
?>