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

Question

我有一个简单的表单，可以生成'brand name' 输入框的JSON 格式。我使用knockout.js 从表单中生成JSON。现在，如何将此生成的数据提供给php 操作文件，以便使用php 在字段'brand_name' 中的字段'brand_name' 中将这个JSON 数据插入我的mySql 表中？

这是我的表格：

<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>

这是脚本：

<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>

我正在尝试这个 php 操作，但它肯定不起作用。

$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，这里就是表单的工作小提琴 - 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 文件中是否有数据。检查您在控制台中发送的数据。

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;
}
?>