在这里，我使用jquery ajax从json获取产品详细信息，我现在已经创建了添加，修改，删除按钮我想实现添加，编辑，删除操作和更新值等功能应该发送到没有重新加载页面的服务器。
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Single page application</title>
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/StyleSheet.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/knockout-3.4.0.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="clearfix header">
<div class="pull-left col-md-4">
<h2 data-bind="text:fullTagline"></h2>
</div>
<div class="pull-left col-md-4">
<div class="header-menu clearfix">
<button id="add_Prod" type="button" class="button_style blue">Add New Product</button>
</div>
</div>
<div class="pull-left col-md-4">
<input type="button" class="button_style blue space " value="Screen 1" />
<input type="button" class="button_style blue" value="Screen 2" />
</div>
</div>
<div class="row" data-bind="foreach: { data: starList, as: 'category' }">
<div class="col-md-6 box-style" >
<div class=" clearfix">
<div class="col-md-4">
<div></div>
<img class="img-responsive" data-bind="attr:{'src': 'images/'+$data.imgname+'.jpeg'}" />
<div class="clearfix">
<br />
<button data-bind="click: $root.editItem" type="button" class="button_style">Modify Product</button>
<br />
<br />
<button data-bind="click: $root.deleteItem" type="button" class="button_style blue">Remove Product</button>
</div>
</div>
<div class="col-md-8">
<div>
<strong>TV Name - </strong>
<span data-bind="text:category.name" ></span>
</div>
<div>
<strong>Model - </strong>
<span data-bind="text:category.model" ></span>
</div>
<div>
<strong>Price - </strong>
<span data-bind="text:category.price" ></span>
</div>
<div>
<strong>Description - </strong>
<span data-bind="text:category.description" ></span>
</div>
<div>
<strong> Features</strong>
</div>
<ul data-bind="foreach: { data: features, as: 'feature' }">
<li>
<b data-bind="text: feature"></b>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="overlay">
<div class="addProduct_wrap ">
<div class="clearfix">
<h2 class="pull-left">Add New Product</h2>
<button type="button" class="btn btn-default red pull-right cancel-overlay">X</button>
</div>
<form class="clearfix">
<div class="form-group">
<label for="name">Name of the product:</label>
<input type="text" class="form-control" id="name"/>
</div>
<div class="form-group">
<label for="model">Model No:</label>
<input type="text" class="form-control" id="model"/>
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" class="form-control" id="price"/>
</div>
<div class="form-group">
<label for="descr">Comment:</label>
<textarea class="form-control" rows="5" id="descr"></textarea>
</div>
<button type="submit" class="btn btn-default blue pull-left">Save Data</button>
<button type="reset" class="btn btn-default blue pull-right">Reset Data</button>
</form>
</div>
</div>
<script src="js/customJS.js"></script>
<script src="js/script.js"></script>
</body>
</html>
//敲诈脚本
function stareDataModel() {
var self = this;
self.tagline = ko.observable("Single Page");
self.hint = ko.observable("Application");
self.fullTagline = ko.computed(function () {
return self.tagline() + " " + self.hint();
});
var question = (function () {
var json = null;
$.ajax({
'async': false,
'type': 'GET',
'global': false,
'dataType': "json",
//'url': "http://www.w3schools.com/angular/customers.php",
//'url': "json/serverdata.json",
'url': "json/records.json",
'success': function (data) {
// alert(data)
// json = JSON.stringify(data);
//var plainJs = ko.toJS(data);
json = data;
// alert(plainJs + "nnmasbdmanbs")
},
error: function (jqXHR, exception) {
if (jqXHR.status === 0) {
alert('Not connect.\n Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found. [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}
});
return json;
// alert(json)
})();
// alert(question);
self.starList = ko.observableArray(question);
};
ko.applyBindings(new stareDataModel());
JSON
[
{
"name": "Vu 109cm (43) Full HD LED TV",
"model": "43D6575, 2 x HDMI, 1 x USB",
"price": "₹ 24,989",
"imgname":"vu",
"description":"Use a Stabilizer to protect your Television, in case there are Regular Voltage Fluctuation in your Location, TV Unit, Power Cable, Remote Control, Battery, Manual, Table Stand, Wall Mount Bracket",
"features": ["Full HD", "1920 x 1080 Resolution","178 degree Viewing Angle","14 Speaker Output", "1 Year Onsite Warranty"]
},
{
"name": " Micromax 102cm (40) Full HD LED TV",
"model": "43D6575, 2 x HDMI, 1 x USB",
"price": "₹ 45,989",
"imgname":"micromax",
"description":"Use a Stabilizer to protect your Television, in case there are Regular Voltage Fluctuation in your Location, TV Unit, Power Cable, Remote Control, Battery, Manual, Table Stand, Wall Mount Bracket",
"features": ["Full HD", "1920 x 1080 Resolution","178 degree Viewing Angle","14 Speaker Output", "1 Year Onsite Warranty"]
},
{
"name": "SAMSUNG 102cm (40) Full HD Smart LED TV",
"model": "40J5300, 2 x HDMI, 2 x USB",
"price": "₹ 36,989",
"imgname":"samsung",
"description":"Use a Stabilizer to protect your Television, in case there are Regular Voltage Fluctuation in your Location, TV Unit, Power Cable, Remote Control, Battery, Manual, Table Stand, Wall Mount Bracket",
"features": ["Full HD", "1920 x 1080 Resolution","178 degree Viewing Angle","14 Speaker Output", "1 Year Onsite Warranty"]
},
{
"name": "SONY 82cm (32) Full HD Smart LED TV",
"model": "233423s, 2 x HDMI, 3 x USB",
"price": "₹ 38,989",
"imgname":"sony",
"description":"Use a Stabilizer to protect your Television, in case there are Regular Voltage Fluctuation in your Location, TV Unit, Power Cable, Remote Control, Battery, Manual, Table Stand, Wall Mount Bracket",
"features": ["Full HD", "1920 x 1080 Resolution","178 degree Viewing Angle","14 Speaker Output", "1 Year Onsite Warranty"]
}
]
答案 0 :(得分：0)
示例代码如下
在模型中创建如下新方法
self.AddStuff = function(){
starList.push(
{
'name':$('#name').val(),
//add other properties here
}
);
}
self.delete = function(item){
starList.remove(item);
}
self.update = function(item){
$('#name').val(item.name); // and other properties
}
并将它们绑定到各自的按钮。 这只是一个伪代码，可以给你一个想法。来吧试一试。