更改 ajax 調用未發生

Question

我正在處理 HTML table 。 我有一個form里面有一個select ，其中有ALL和Biscuts選項。 在第一次加載時，我正在填充一個工作正常的表。

當我從 select 中選擇一個選項時，我想對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 調用

1. 填充所有Categories數據
2. 將數據發送回選擇了哪個類別的服務器 - 這不起作用
3. 根據所選選項填充新表

我的主要問題是第二個問題，因為 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);
             }
          });

`