Question

我正在使用HTML table。我有一个form，里面有一个select，其中有ALL和Biscuts选项。第一次加载时，我正在填充一个工作正常的表。

当我从选择中选择一个选项时，我想在onchange事件上进行AJAX调用，但没有发生。当用户从下拉列表中选择任何选项时，我试图动态更新我的表。

$(document).ready(function() {
  $.ajax({
    async: true,
    url: "CategoryOlWiseFilter",
    method: "GET",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(tableData) {
      addTable(tableData);
    }
  });

  $('#CategoryName').change(function() { //this one is not working
    var selectedOption = this.value;
    alert(selectedOption);
    $.ajax({
      url: "ItemCategoryWiseFilter",
      method: "POST",
      data: {
        categoryName: selectedOption,
      },
    });
  });
});

<div class="container" id="divHide">
  <form>
    <div class="row position-relative">
      <div class="col-4 brder p-2">
        <h5>Category</h5>
      </div>
      <div class="col-8 text-center brder">
        <select class="form-control offset-4 col-4" id="CategoryName">
          <option>All</option>
          <option>Biscuits</option>
        </select>
      </div>
    </div>
    <br>
    <div class="table table-responsive">
      <table class="w-100" id="HourlysalesSummary"></table>
    </div>
  </form>
</div>

我的后端Servlet代码

protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
// i will use the here categoryNamePost here
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    String categoryNamePost = request.getParameter("categoryName");
    System.out.println("Category" + categoryNamePost);
    getServletContext().setAttribute("categoryNameAttribute", categoryNamePost);
}

我总共进行了3次AJAX呼叫

填充所有Categories的数据
将数据发送回选定类别的服务器-这不起作用
根据所选选项填充新表

我的主要问题是第二个问题，因为AJAX调用不成功。我在做什么错了？

Answer 1

在更改触发器中，如果我假设它正确填充了表，则再次调用addtable函数。selectedOption之后您还使用了一个逗号。

 <table id="table" class='table table-bordered table-striped'>
    <tr>
    <td align="center" ><b>NEED</b>
    </td>
    </tr>
    <tr> 
  <tbody id="table2"></tbody>
    </tr>
   </table>
   <script>
      $('#CategoryName').change(function() { 
        var selectedOption = this.value;
         alert(selectedOption);
         $.ajax({
            url: "ItemCategoryWiseFilter",
            method: "POST",
            data: {
            categoryName: selectedOption},
             success: function(tableData) {
           // if addtable(tableData) is not populating html
                $('#table2').html(data);
             }
          });

`

进行更改时，ajax调用不会发生

1 个答案: