0
나는 knockoutjs에서 새롭다. 저는 knockoutjs로 프로젝트를 개발 중입니다. 아약스를 통해 데이터를 보내려고 할 때. 오류가 발생했습니다. 녹아웃 변환 된 json 데이터를 ajax로 보내는 방법은 무엇입니까? 확인할 json 데이터를 경고하려고 할 때 데이터가 표시되지 않습니다. 나는이 질문을 처음으로 제기하고있다. 실수가 있으면 죄송합니다.knockoutjs 데이터를 아약스로 보내는 방법
내 코드는 다음과 같습니다
ko.applyBindings(new ViewModel());
var jsonData = ko.toJS(ViewModel);
$('#submit').click(function(){
alert(ko.toJSON(jsonData));
ViewModel 함수입니다, 그래서 당신은 JSON으로 바꿀 수 없습니다
<!doctype html>
<html>
<head>
<head>
<meta charset="utf-8">
<title>INDIATECH247</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="css/tooltipster.css" />
<link rel="stylesheet" href="css/themes/tooltipster-punk.css" />
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.tooltipster.min.js" type="text/javascript"></script>
<script src="js/knockout-3.0.0.js" type="text/javascript"></script>
<script src="js/knockout.mapping-latest.debug.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
//Tooltip Js Started Here
$('.tooltip').tooltipster({
theme: 'tooltipster-punk'});
// Default Grid View of Data
if($('.row').hasClass('active')){
$('#grid').removeClass('db')
$('#row').addClass('db')}
else{
$('#row').removeClass('db')}
if($('.grid').hasClass('active')){
$('#row').removeClass('db')
$('#grid').addClass('db')}
else{
$('#grid').removeClass('db')}
// Show and Hide View Button
$('.checked').change(function(){
var no=$(".yes input:checkbox:checked").length;
if(no>1 || no==0){
$('.view').addClass('dn')
}
else{
$('.view').removeClass('dn')
}
})
//View Full Info ///////////// Working able to remove selected data
$('.view').click(function(){
//var selected=$(".yes").has("input:checkbox:checked")
//$((selected)).remove();
$('#fullinfo').addClass('db')
})
// Grid and Row view of data
$('.row').click(function(e) {
$('.grid').removeClass('active');
$(this).addClass('active');
//Row View on click Started Here
if($('.row').hasClass('active')){
$('#grid').removeClass('db')
$('#row').addClass('db')}
else{
$('#row').removeClass('db')}
});
$('.grid').click(function(e) {
$('.row').removeClass('active');
$(this).addClass('active');
//Grid View on Click Started Here
if($('.grid').hasClass('active')){
$('#row').removeClass('db')
$('#grid').addClass('db')}
else{
$('#grid').removeClass('db')}
});
// Find button coding
$('#find').click(function(){
$('#searchbutton').addClass('dn');
$('#search').removeClass('dn')
})
});
</script>
</head>
<div class="page-header">
<header class="center-auto">
<div class="logo fl">
<a href="javascript:void(0)" title="">INDIATECH247</a>
</div>
<nav class="fl">
<ul>
<li><a href="home.php" title="">Dashboard</a></li>
<li><a href="customers.php" title="">Customers</a></li>
<li><a href="javascript:void(0)" title="">Products</a></li>
<li><a href="invoiceall.php" title="">Invoice</a></li>
</ul>
</nav>
<div class="btn-group top-buttons">
<div class="btn btn-success tooltip" title="Add New Customer"><i class="fa fa-plus"></i> <a href="addcustomer.php" title="">Add Customer</a></div>
<div class="btn btn-success tooltip" title="Add New Product"><i class="fa fa-plus"></i> <a href="javascript:void(0)" title="">Add Product</a></div>
<div class="btn btn-success tooltip" title="Create Invoice"><i class="fa fa-edit"></i> <a href="javascript:void(0)" title="">Create Invoice</a></div>
</div>
</header>
</div>
<div class="center-auto">
<div class="hed">Add Customer</div>
<script type="text/javascript">
$(document).ready(function(e) {
// View Model (this is a representation of the data for this particular view/webpage)
var ViewModel = function() {
var self = this;
self.Fname = ko.observable();
self.Lname = ko.observable();
self.Email = ko.observable();
self.Mobile = ko.observable();
self.Bname = ko.observable();
self.Address = ko.observable();
self.City = ko.observable();
self.Pincode = ko.observable();
self.isValid = ko.computed(function(){
return self.Fname() && self.Email() && self.Mobile();
});
};
// Start knockout!
ko.applyBindings(new ViewModel());
var jsonData = ko.toJS(ViewModel);
$('#submit').click(function(){
alert(ko.toJSON(jsonData));
$.ajax({
url:"includes/addcustomer.php",
type:"Post",
dataType: 'json',
data:jsonData,
success:function(data){
$(".check").text(data);
}
})
})
});
</script>
<form>
<div class="span6"><span class="span2">First Name</span>
<input type="text" name="fname" id="fname" data-bind="value:Fname, valueUpdate: 'afterkeyup'"/></div>
<div class="span6"><span class="span2">Last Name</span>
<input type="text" name="lname" id="lname"data-bind="value:Lname, valueUpdate: 'afterkeyup'"/></div>
<div class="span6"><span class="span2">Email</span>
<input type="text" name="email" id="email" data-bind="value:Email, valueUpdate: 'afterkeyup'"/></div>
<div class="span6"><span class="span2">Mobile No</span>
<input type="text" name="fname" id="fname" data-bind="value:Mobile, valueUpdate: 'afterkeyup'"/></div>
<div class="span6"><span class="span2">Business Name</span>
<input type="text" name="bname" id="bname" data-bind="value:Bname, valueUpdate: 'afterkeyup'"/></div>
<div class="span6"><span class="span2">Address</span>
<input type="text" name="address" id="address" data-bind="value:Address, valueUpdate: 'afterkeyup'"/></div>
<div class="span6"><span class="span2">City</span>
<input type="text" name="city" id="city" data-bind="value:City, valueUpdate: 'afterkeyup'"/></div>
<div class="span6"><span class="span2">Pin Code</span>
<input type="text" name="pincode" id="pincode" data-bind="value:Pincode, valueUpdate: 'afterkeyup'"/></div>
<button type="button" class="btn btn-success" id="submit" data-bind="enable: isValid" data-bind="submit: ViewModel.bind($root,$data)" method="POST"><i class="fa fa-plus"></i> Add Customer</button>
</form>
<pre data-bind="text: ko.toJSON($root, null, 2)" id="jsondata" class="check"></pre>
</div>
</body>
</html>
빠른 답장을 보내 주셔서 감사합니다. 위의 코드를 업데이트 한 후 경고를 클릭하면 {} 기호가 비어 있습니다. 우리가 필요로하는대로 작동하지 않습니다. – SAHAR