[英]How to insert knockout generated JSON data in the mySql table?
我有一個簡單的表單,可以生成'brand name'
輸入框的JSON
格式。 我已經使用knockout.js
表JSON
從表單生成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>
這是腳本:
<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是形式-的工作撥弄撥弄
請像這樣嘗試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']);
我從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>
connect
, insert
, update
和delete
數據的服務器端php
是:
<?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;
}
?>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.