如何将javascript变量传递到JavaServletDoPost_Javascript_Java_Jquery_Servlets

如何将javascript变量传递到JavaServletDoPost

javascript java jquery servlets

如何将javascript变量传递到JavaServletDoPost,javascript,java,jquery,servlets,Javascript,Java,Jquery,Servlets,我有一个HTML表格，它有下拉菜单。我正在做的是，如果用户单击任何下拉菜单，我将把列名和相应的行（billdate）存储到一个变量中。现在，我想做的是将这个变量传递到我的java servelt doPost方法中，并将该变量使用到doGet中，以进行另一个ajax调用。我已经搜索了很多关于将变量从javascript传递到Javaservlet的信息，但没有得到任何好的答案这是我的javascript表代码 <div id="tbl"></div> <ul

我有一个HTML表格，它有下拉菜单。我正在做的是，如果用户单击任何下拉菜单，我将把列名和相应的行（

billdate

）存储到一个变量中。现在，我想做的是将这个变量传递到我的java servelt doPost方法中，并将该变量使用到doGet中，以进行另一个ajax调用。我已经搜索了很多关于将变量从javascript传递到Javaservlet的信息，但没有得到任何好的答案

这是我的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', '');

我只想知道如何通过ajax将一个变量从java脚本传递到JavaServlet请帮我

这是我的HTML表格

我必须进行两个ajax调用，一个是将数据发布到servlet，另一个是从servlet获取数据，以将新表呈现到

testdiv

中，这两个调用将在单击下拉菜单时进行，即

Report1

首先我要发布数据，然后从do get通过ajax调用该数据

请这里的任何人在这方面帮助我

您在下面检查以了解如何使用

AJAX

将数据发送到

servlet

您可以使用

data

将数据发送到servlet，也可以使用

？

使用查询参数。参见下面的示例

请注意

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>

确切的问题是什么？如何进行Ajax调用？你已经试过了吗？@Mark-yup我知道如何进行ajax调用，比如

$.ajax（{url:“HourlyBet”，method:“POST”，}）

但是我如何在单击一个按钮时进行ajax调用，这也会根据从javascript到servlet传递的值提供更新的数据……而且我也不知道如何将变量从javascript传递到servlet，如果您只是将ajax调用放在函数中，例如

$（“.Link2”）。单击

它将在单击.Link2时执行。我如何将这两个值传递到servlet

currentlyClickedOutlet

和

currentlyClickedBilldate

我想将这两个变量传递到我的servlet您可以使用数据传递，例如：

数据：{field1:“hello”，field2:“hello2”}

。嘿，我必须在一个click上并行或一个接一个地进行两个ajax调用？一个接一个..就像第一个将数据放入servlet，另一个调用基于该数据的值

<!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>

<!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>

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";
    }

}