如何将 javascript 变量传递到 java servlet doPost

Question

我有一个HTML表，它有下拉菜单，我正在做的是，如果用户单击任何下拉菜单，我将列名和相应的行(billdate)存储到一个变量中，现在我想做的是将此变量传递到我的java servelt doPost方法中，并将该变量用于doGet进行另一个ajax调用。 我已经搜索了很多从JavaScript将变量传递到Java Servlets，但没有得到任何好的答案。

这是我的JavaScript表代码

<div id="tbl"></div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
<li><a href="#" class="link1">Report1</a></li>
<li><a href="#" class="Link2">Report2</a></li>
</ul>
var currentlyClickedPlace = "";
$(window).load(function() {
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
//move dropdown menu
$(this).after($dropdown);
//update links
$(this).dropdown();
currentlyClickedOutlet = $(this).attr("data-place");
currentlyClickedBilldate = $(this).attr("data-plac");
});
$(".link1").click(function(){
console.log(currentlyClickedOutlet)
console.log(currentlyClickedBilldate)
//   here  i have to make two ajax call one to send currentlyClickedOutlet and currentlyClickedBilldate to the server i.e javaservlet doPost
//  and another one to bind new html table into test div wchich will give me data based on clicked dropdown
//call ajax and bind the data into test div
});
});
data = [{
"amount": 291589,
"billdate": "2018-08-01",
"outlet": "JAYANAGAR"
},
{
"amount": 58337,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM"
},
{
"amount": 65970,
"billdate": "2018-08-01",
"outlet": "KOLAR"
},
{
"amount": 296125,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR"
},
{
"amount": 56545,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM"
},
{
"amount": 72213,
"billdate": "2018-08-02",
"outlet": "KOLAR"
},
{
"amount": 346605,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR"
},
{
"amount": 62459,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM"
},
{
"amount": 65248,
"billdate": "2018-08-03",
"outlet": "KOLAR"
},
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 138151,
"billdate": "2018-08-04",
"outlet": "KOLAR"
},
{
"amount": 628358,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR"
},
{
"amount": 115223,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 134107,
"billdate": "2018-08-05",
"outlet": "KOLAR"
},
{
"amount": 177866,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR"
},
{
"amount": 66095,
"billdate": "2018-08-06",
"outlet": "KOLAR"
},
{
"amount": 284069,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR"
},
{
"amount": 58789,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM"
},
{
"amount": 67886,
"billdate": "2018-08-07",
"outlet": "KOLAR"
},
{
"amount": 313128,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR"
},
{
"amount": 59939,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM"
},
{
"amount": 68558,
"billdate": "2018-08-08",
"outlet": "KOLAR"
}
]
let formatData = function(data) {
let billdates = [];
let outlets = [];
data.forEach(element => {
if (billdates.indexOf(element.billdate) == -1) {
billdates.push(element.billdate);
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
return {
data: data,
billdates: billdates,
outlets: outlets,
};
};

let renderTable = function(data, divId, filterdata) {
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById(divId);
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Bill___Date";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let outletWiseTotal = {};
th = document.createElement("th");
th.innerHTML = "Total1";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
}
});
grandTotal += outletWiseTotal[element];
});

thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = outletWiseTotal[element];
th.classList.add("text-right"); 
headerRow.appendChild(th);
});
th = document.createElement("th");
th.innerHTML = grandTotal;
th.classList.add("text-right"); // grand total
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
outlets.forEach(outlet => {
let el = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
el = d.amount;
}
});


td = document.createElement("td");
a = document.createElement("a");
td.classList.add("text-right");
td.classList.add("dropdown");
a.classList.add("btn");
a.classList.add("btn-default");
a.classList.add("actionButton");
a.setAttribute("data-place", outlet);
a.setAttribute("data-plac", element);

a.setAttribute("data-toggle", "dropdown");
a.innerHTML = el;
td.appendChild(a); 
row.appendChild(td);


});

td = document.createElement("td");
td.innerHTML = total;
td.classList.add("text-right"); 
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
});
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData, 'tbl', '');

因此，当 ill 将值单击到我的 dopost 方法中时，我必须在我的 doGet 中使用该变量进行另一个 ajax 调用以将一些新数据显示到test div

我知道如何在 servlet 中声明一个全局属性，以便在我的应用程序中的任何位置使用该变量

像这样getServletContext().setAttribute("DateAttribute", Date);

这是我的Javaservlet代码

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

String Date=getServletContext().getAttribute("DateAttribute").toString(); // this how i will access Date and Outlet from dopost to doget
String Outlet=getServletContext().getAttribute("OutletAttribute").toString();
//will use here the value of Date and Outlet

response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String Date = request.getParameter("currentlyClickedBilldate");  //here i want that values from java script
String Outlet = request.getParameter("currentlyClickedOutlet");  //here i want that values from java script

getServletContext().setAttribute("DateAttribute", Date);  //this is how i will make Date and Outlet a global variables to access anywhere in my application
getServletContext().setAttribute("OutletAttribute", Outlet);
doGet(request, response);
}

• 我只想知道如何通过 ajax 将变量从 java 脚本传递到 java servlet，请帮帮我

这是我的 HTML 表格的小提琴

小提琴

我必须进行两个 ajax 调用，一个是将数据发布到 servlet 中，另一个是从 servlet 获取数据以将新表呈现为test div，这两个调用将在单击下拉列表时进行，即Report1我想发布数据，然后在通过 ajax 调用该数据后从 do get 请任何人在这里帮我解决这个问题

Answer 1

您可以在下面查看以下内容以了解如何使用AJAX将数据发送到servlet

您可以使用data将数据发送到 servlet，也可以使用?查询参数。请参阅以下示例。

Jquery-ajax-options

请注意http://localhost:8080/testpost因您的应用而异。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#id1").click(function(){
var user = 'get-user-by-query-param';
$.get("http://localhost:8080/testget?name="+user, function(data, status){
alert("Data: " + data + "nStatus: " + status);
$("#divId1").html(data);
});
});
$("#id2").click(function(){
var user = 'post-user-by-query-param';
$.post("http://localhost:8080/testpost?name="+user, function(data, status){
alert("Data: " + data + "nStatus: " + status);
$("#divId2").html(data);
});
});

$("#id3").click(function(){
var user = 'get-user-by-sending-in-data';
var data = {"name": user};
$.get("http://localhost:8080/testget",data, function(data, status){
alert("Data: " + data + "nStatus: " + status);
$("#divId3").html(data);
});
});

$("#id4").click(function(){
var user = 'post-user-by-sending-in-data';
var data = {"name": user};
$.post("http://localhost:8080/testpost",data, function(data, status){
alert("Data: " + data + "nStatus: " + status);
$("#divId4").html(data);
});
});
$("#id5").click(function(){
var user = 'get-user-by-query-param';
$.get("http://localhost:8080/testget?name="+user, function(data, status){
alert("Data: " + data + "nStatus: " + status);
$("#divId1").html(data);
var postData = {'name':data}
$.post("http://localhost:8080/testpost",postData, function(data, status){
alert("Data: " + data + "nStatus: " + status);
data
$("#divId4").html(data);
});
});
});
});
</script>
</head>
<body>
<button id="id1">GET with query param</button>
<div id="divId1"></div>
<button id="id2">POST with query param</button>
<div id="divId2"></div>
<button id="id3">GET with data</button>
<div id="divId3"></div>
<button id="id4">POST with data</button>
<div id="divId4"></div>
<button id="id5">POST and GET with data</button>
<div id="divId5"></div>
</body>
</html>

我觉得最好用于链接呼叫。

https://api.jquery.com/promise/

使用承诺链接调用：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#id5").click(function(){
var user = 'get-user-by-query-param';
$.when( $.get( "http://localhost:8080/testget?name="+user ) ).done(function( data, textStatus, jqXHR ) {
$("#divId5").html(data);
var postData = {'name':data+' second input'}
$.post("http://localhost:8080/testpost",postData, function(data, status){
alert("Data: " + data + "nStatus: " + status);
$("#divId5").append("<br/>"+data);
});
});
});
});
</script>
</head>
<body>

<button id="id5">POST and GET with data</button>
<div id="divId5"></div>
</body>
</html>

以下是我使用springMVC的控制器类

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class WelcomeController {

@RequestMapping("/testpost" )
@PostMapping
@ResponseBody
public String testPost(HttpServletRequest request, HttpServletResponse response) {
String name = request.getParameter("name");
return name;
//return "welcome"; //if you want to return jsp
}
@RequestMapping("/testget" )
@PostMapping
@ResponseBody
public String testGet(HttpServletRequest request, HttpServletResponse response) {
String name = request.getParameter("name");
return name;
///return "welcome";
}
}