如何将多个值从javascript返回到jsp [英] how to return multiple values from javascript to jsp

问题描述

我正在尝试在

    <input type ="text" id="fruitsname" name="fruit/>       

在单击添加到购物车"按钮后，但是在该函数下方仅返回一个水果名称而不是多个水果名称的情况下，如何在单击添加到购物车"按钮后返回多个水果名称

after clicking on ADD TO Cart button, but below function returning only one fruit name instead of multiple fruits name, how can I return multiple fruits name after clicking on ADD to cart button

 document.getElementById('fruitsname').value= cartArray[i].name;
 //returning only one fruit name to home.jsp instead of multiple fruits 
 name, how can I return multiple fruits name from JS file 

-------------- home.jsp ---------------------

--------------home.jsp---------------------

  <a href="#" data-name="Orange" data-price="5" class="add-to-cart btn 
 btn-primary">Add to cart</a> // Adding Orange after clicking on Add to cart
  <a href="#" data-name="Banana" data-price="5" class="add-to-cart btn btn- 
  primary">Add to cart</a> // Adding Banana after clicking on Add to cart


  <form name="billing" action="billing.jsp">           
  <input type="text" id="fruitsname"name="fruits"/> // returning 
  fruits name from JS file in function displayCart() written towards last of 
  JS file
  <input type="submit"/>
  </form> 

--------------------- JS文件----------------

---------------------JS File----------------

 var shoppingCart = (function() {
 // =============================
 // Private methods and properties
 // =============================
 cart = [];

// Constructor
function Item(name, price, count) {
 this.name = name;
 this.price = price;
 this.count = count;
 }

 // Save cart
 function saveCart() {
 sessionStorage.setItem('shoppingCart', JSON.stringify(cart));
  }

  // Load cart
  function loadCart() {
  cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
  }
  if (sessionStorage.getItem("shoppingCart") != null) {
  loadCart();
  }



 // Public methods and properties

 var obj = {};

 // Add to cart

 obj.addItemToCart = function(name, price, count) {
 for(var item in cart) {
 if(cart[item].name === name) {
 cart[item].count ++;
 saveCart();
 return;
 }
 }
 var item = new Item(name, price, count);
 cart.push(item);
 saveCart();
}
 // Set count from item
obj.setCountForItem = function(name, count) {
for(var i in cart) {
 if (cart[i].name === name) {
cart[i].count = count;
break;
 }
 }
 };
  // Remove item from cart
  obj.removeItemFromCart = function(name) {
 for(var item in cart) {
 if(cart[item].name === name) {
  cart[item].count --;
  if(cart[item].count === 0) {
    cart.splice(item, 1);
  }
  break;
}
}
saveCart();
}

 // Remove all items from cart
obj.removeItemFromCartAll = function(name) {
for(var item in cart) {
if(cart[item].name === name) {
cart.splice(item, 1);
break;
}
}
saveCart();
}

// Clear cart
obj.clearCart = function() {
cart = [];
saveCart();
}

// Count cart 
obj.totalCount = function() {
var totalCount = 0;
for(var item in cart) {
totalCount += cart[item].count;
 }
return totalCount;
 }

// Total cart
obj.totalCart = function() {
var totalCart = 0;
for(var item in cart) {
totalCart += cart[item].price * cart[item].count;
 }

 document.getElementById('idofinput').value=Number(totalCart.toFixed(2)); 
 // Here I gave an input "IDOFINPUT" to call it in input type in form in 
  home.jsp

 return Number(totalCart.toFixed(2));
 }

 // List cart
 obj.listCart = function() {
 var cartCopy = [];
 for(i in cart) {
 item = cart[i];
 itemCopy = {};
 for(p in item) {
  itemCopy[p] = item[p];

 }
 itemCopy.total = Number(item.price * item.count).toFixed(2);
 cartCopy.push(itemCopy)
}
 return cartCopy;
 }

// cart : Array
// Item : Object/Class
// addItemToCart : Function
// removeItemFromCart : Function
// removeItemFromCartAll : Function
// clearCart : Function
// countCart : Function
// totalCart : Function
// listCart : Function
// saveCart : Function
// loadCart : Function
return obj;
})();


// *****************************************
// Triggers / Events
// ***************************************** 
// Add item
 $('.add-to-cart').click(function(event) {
 event.preventDefault();
 var name = $(this).data('name');
 var price = Number($(this).data('price'));
 shoppingCart.addItemToCart(name, price, 1);
 displayCart();
 });

 // Clear items
 $('.clear-cart').click(function() {
 shoppingCart.clearCart();
 displayCart();
  });


function displayCart() {
var cartArray = shoppingCart.listCart();
var output = "";
for(var i in cartArray) {
output += "<tr>"
+ "<td>" + cartArray[i].name + "</td>" 
+ "<td>(" + cartArray[i].price + ")</td>"
+ "<td><div class='input-group'><button class='minus-item input-group- 
addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
+ "<input type='number' class='item-count form-control' data-name='" + 
 cartArray[i].name + "' value='" + cartArray[i].count + "'>"
+ "<button class='plus-item btn btn-primary input-group-addon' data- 
name=" + cartArray[i].name + ">+</button></div></td>"
+ "<td><button class='delete-item btn btn-danger' data-name=" + 
cartArray[i].name + ">X</button></td>"
 + " = " + "<td>" + cartArray[i].total + "</td>" +  "</tr>";}

 document.getElementById('fruitsname').value= cartArray[i].name; //retuning 
  fruits name to home.jsp but returning only one fruit name instead of 
 multiple fruits name

 $('.show-cart').html(output);
 $('.total-cart').html(shoppingCart.totalCart());
 $('.total-count').html(shoppingCart.totalCount());
 }

 // Delete item button

 $('.show-cart').on("click", ".delete-item", function(event) {
 var name = $(this).data('name')
 shoppingCart.removeItemFromCartAll(name);  
  displayCart();
 })


 // -1
 $('.show-cart').on("click", ".minus-item", function(event) {
 var name = $(this).data('name')
 shoppingCart.removeItemFromCart(name);
 displayCart();
 })
  // +1
  $('.show-cart').on("click", ".plus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.addItemToCart(name);
  displayCart();
  })

 // Item count input
  $('.show-cart').on("change", ".item-count", function(event) {
  var name = $(this).data('name');
  var count = Number($(this).val());
  shoppingCart.setCountForItem(name, count);
  displayCart();
  });

 displayCart();

推荐答案

在jsp文件中使用request.getParameterValues("fruits");来获取所有带有name="fruits"

use request.getParameterValues("fruits");in your jsp file to get values of all input elements with name="fruits"

这篇关于如何将多个值从javascript返回到jsp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！