如何從沒有ajax調用的jquery中的函數返回json對象？
[英]How to return a json object from a function in jquery with no ajax call?
問題描述
因此，我試圖讓一個Web應用程序，其中我需要顯示車的確認對話框（）的細節，但我不能夠存儲變量，因為它是異步函數調用。 所以，我嘗試使用函數回調，但通沒有中斷。 請幫助如何從功能getValueUsingClass（）將數據獲取到cart_items中。
創建一個延遲的對象，但我不如何使用它。 急需的幫助。 我很沮喪，這件事。 所以請幫忙，謝謝
//this is client.js
$(document).ready(function () {
var dfd = $.Deferred();
var cart_items = [
//this is the variable that needs to be stored with the cart items which will be coming from getValueUsingClass() function.
];
//collecting the items into a json object to send to the server
$(".checkboxlist").click(function () {
cart_items = (getValueUsingClass());
console.log(cart_items);
})
//function to store the values in cart_items but not able to store
function getValueUsingClass(setValue) {
/* declare a checkbox array */
var chkArray = [];
/* look for all checkboxes that have a class 'check' attached to it and check if it was checked */
$(".checkboxlist:checked").each(function () {
var element = this;
var cart_item = {
id: this.id,
item: this.name,
cost: Number(this.value),
quantity: 1
}
chkArray.push(cart_item);
setValue(cart_items);//tried to use this as a callback function
})
/* we join the array separated by the comma */
function setValue(cart_items) {
cart_items = chkArray;
console.log("hell" + cart_items[0].id);
}
/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
plate is the cart for this, I am using local variable chkArray to store the print the data on the cart
$(".plate").on('click', function () {
$('.plate_items').html(" ");
console.log(cart_items[0].id);
for (itemIterator = 0; itemIterator < chkArray.length; itemIterator++) {
$('.plate_items').append('<li class="list-group-item">' + chkArray[itemIterator].cost + '</li>');
}
});
return chkArray;
}
$('.proceed_btn').on('click', function () {
console.log("hello");
console.log(cart_items);
let details = [{
name: $('#name').val(),
email: $('#email').val(),
empid: $('#empid').val()
}]
console.log(details[0].name + details[0].email + details[0].empid);
cart_items = cart_items.concat(details);
})
})
//this is index.html
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="container-fluid header">
<span class="main_title" style="float:left">Eatachi</span>
<nav class="nav navigation">
</nav>
</div>
</header>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg plate" data-toggle="modal" data-target="#myModal">Plate</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email ID:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="empid">Employee ID:</label>
<input type="text" class="form-control" id="empid">
</div>
<h4 class="modal-title">Cart Details</h4>
</div>
<div class="modal-body plate_items">
<p>Some text in the modal.</p>
<ul class="list-group">
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success proceed_btn">Proceed to payment</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div class="col-lg-4">
<header>
<h3>Veg Alacarte</h3>
</header>
<article class="well well-lg">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
<img class="img-thumbnail news-pic center-block" src="imgs/1.jpg" />
</a>
</h4>
</div>
<div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
<ul class="list-group">
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="14" type="checkbox" value="50"> Veg Fried Rice Rs.50</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="15" type="checkbox" value="60"> Veg Biryani Rs.60</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="16" type="checkbox" value="70"> Paneer Fried Rice Rs.70</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="17" type="checkbox" value="50"> Veg Noodles Rs.50</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="18" type="checkbox" value="35"> Curd Rice Rs.35</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="19" type="checkbox" value="35"> Sambar Rice Rs.35</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="20" type="checkbox" value="35"> Veg Pulao Rs.35</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="21" type="checkbox" value="35"> Lemon Rice Rs.35</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="22" type="checkbox" value="15"> Veg Curry Rs.15</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="23" type="checkbox" value="10"> Curd Rs.10</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="24" type="checkbox" value="10"> Dal Rs.10</li>
</ul>
</div>
<ul class="list-group">
</ul>
</article>
</div>
<div class=" col-lg-4">
<header>
<h3>Diet</h3>
</header>
<article class="well well-lg">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#dietList" aria-expanded="false" aria-controls="collapseListGroup1">
<img class="img-thumbnail news-pic center-block" src="imgs/2.jpg" />
</a>
</h4>
</div>
<div id="dietList" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
<ul class="list-group">
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="25" type="checkbox" value="50"> North Diet Rs.50</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="26" type="checkbox" value="50"> South Diet Rs.50</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="27" type="checkbox" value="70"> South Diet Royal Rs.70</li>
</ul>
</div>
<ul class="list-group">
</ul>
</article>
</div>
<div class=" col-lg-4">
<header>
<h3>Non Veg Alacarte</h3>
</header>
<article class="well well-lg">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#nonVegList" aria-expanded="false" aria-controls="collapseListGroup1">
<img class="img-thumbnail news-pic center-block" src="imgs/3.jpg" />
</a>
</h4>
</div>
<div id="nonVegList" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
<ul class="list-group">
<li class="list-group-item">
<input class="checkboxlist" id="1" type="checkbox" value="130"> Chicken Biryani Rs.130</li>
<li class="list-group-item">
<input class="checkboxlist" id="2" type="checkbox" value="130"> Fish Biryani- Rs.130</li>
<li class="list-group-item">
<input class="checkboxlist" id="3" type="checkbox" value="130"> Prawn65 Biryani Rs.130</li>
<li class="list-group-item">
<input class="checkboxlist" id="4" type="checkbox" value="100"> Chicken Dum Biryani Rs.100</li>
<li class="list-group-item">
<input class="checkboxlist" id="5" type="checkbox" value="110"> Chicken Roast Biryani Rs.110</li>
<li class="list-group-item">
<input class="checkboxlist" id="6" type="checkbox" value="120"> Chicken Boneless Biryani Rs.120</li>
<li class="list-group-item">
<input class="checkboxlist" id="7" type="checkbox" value="70"> Egg Biryani Rs.70</li>
<li class="list-group-item">
<input class="checkboxlist" id="8" type="checkbox" value="60"> Egg Curry with Roti Rs.60</li>
<li class="list-group-item">
<input class="checkboxlist" id="9" type="checkbox" value="80"> Egg Curry with Paratha Rs.80</li>
<li class="list-group-item">
<input class="checkboxlist" id="10" type="checkbox" value="70"> Chicken Fried Rice Rs.70</li>
<li class="list-group-item">
<input class="checkboxlist" id="11" type="checkbox" value="70"> Chicken Noodles Rs.70</li>
<li class="list-group-item">
<input class="checkboxlist" id="12" type="checkbox" value="60"> Egg Fried Rice Rs.60</li>
<li class="list-group-item">
<input class="checkboxlist" id="13" type="checkbox" value="60"> Egg Noodles Rs.60</li>
</ul>
</div>
<ul class="list-group">
</ul>
</article>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span id="copyright-year">©2018</span>
</div>
</div>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="scripts/client.js"></script>
</html>
<!-- end snippet -->
2 個解決方案
解決方案1
0 2018-01-28 15:50:06
用javascript進行的異步調用不會立即為您返回答案，但會向您返回承諾，最終它會為您提供期望的答案。 通常，promise具有then方法，該方法是一個回調函數，當promise准備就緒時，promise會公開該方法以訪問數據。 因此，關鍵是您可以在then方法中利用數據。 有關更詳細的參考，請轉到此處 。
解決方案2
0 2018-01-29 16:20:23
實際上，問題不在於任何函數回調或異步，我設置為cart_items的值應該使用push（）方法傳遞，而不是直接分配。
$(document).ready(function () {
var dfd = $.Deferred();
var cart_items = [
//this is the variable that needs to be stored with the cart items which will be coming from getValueUsingClass() function.
];
//collecting the items into a json object to send to the server
$(".checkboxlist").click(function () {
cart_items = (getValueUsingClass());
console.log(cart_items);
})
//function to store the values in cart_items but not able to store
function getValueUsingClass(setValue) {
/* declare a checkbox array */
var chkArray = [];
/* look for all checkboxes that have a class 'check' attached to it and check if it was checked */
$(".checkboxlist:checked").each(function () {
var element = this;
var cart_item = {
id: this.id,
item: this.name,
cost: Number(this.value),
quantity: 1
}
chkArray.push(cart_item);
setValue(cart_items);//tried to use this as a callback function
})
/* we join the array separated by the comma */
function setValue(cart_items) {
//cart_items = chkArray; this is the mistake
cart_items.push(chkArray);//this is the correct way because I am passing the reference but the following array will not accept the reference as a value.
console.log("hell" + cart_items[0].id);
}
/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
plate is the cart for this, I am using local variable chkArray to store the print the data on the cart
$(".plate").on('click', function () {
$('.plate_items').html(" ");
console.log(cart_items[0].id);
for (itemIterator = 0; itemIterator < chkArray.length; itemIterator++) {
$('.plate_items').append('<li class="list-group-item">' + chkArray[itemIterator].cost + '</li>');
}
});
return chkArray;
}
$('.proceed_btn').on('click', function () {
console.log("hello");
console.log(cart_items);
let details = [{
name: $('#name').val(),
email: $('#email').val(),
empid: $('#empid').val()
}]
console.log(details[0].name + details[0].email + details[0].empid);
cart_items = cart_items.concat(details);
})
})
使用jQuery ajax調用PHP和json return並嘗試從json對象構建列表
[英]Use jQuery ajax call PHP with json return and try to build a list from the json object
返回的HTML / JSON與包含jQuery AJAX調用的普通JS函數？
[英]return HTML/JSON with a normal JS function that contains a jQuery AJAX call?
在jQuery中使用$ .ajax（）函數調用時，不會傳遞JSON對象
[英]No JSON object gets passed when using $.ajax() function call in jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.