调用 load() function 时 div 元素隐藏

Question

我正在我的 jsp 页面上按某些标准（例如按价格、按作者）进行订购。 并在选择新的排序选项时使用 ajax 重新加载 div 的内容。 但是当调用重新加载 function 时，它只是在 web 页面上隐藏 div。

我已经检查过，需要显示 session scope中的书籍，并且正确包含 Jquery。

这是 html 用于选择要排序的标准：

  <select>
        <option id="default">Default</option>
        <option id="price">By price</option>
        <option id="author">By author</option>
  </select>

这是处理select元素的点击事件的代码：

$(document).ready(function () {
    $('select').change(function () {
        $( "select option:selected" ).each(function() {
            let sortAttr = $('option:selected').attr('id');
            $.ajax({
                // passing data to servlet
                url: 'http://localhost:8080/sort',
                type: 'GET',
                // sort criteria
                data: ({sort: sortAttr}),
                // div needed to be reloaded
                success: function () {
                    $('#mydiv').load(' #mydiv');
                }
            });
        })
    });
})

jsp 页面上的代码需要重新加载div ：

<div id="mydiv">
   <c:forEach var="book" items="${sessionScope.books}">
       <div class="col-4"><a href="/home?command=book_details&isbn=${book.ISBN}">
           <img src="data:image/jpg;base64,${book.base64Image}">
           <h4>${book.title}</h4>
           <p>${book.price}$</p>
        </a></div>
   </c:forEach>
</div>

任何想法为什么会发生这种情况？

编辑

最后，我发现了发生了什么。 The important thing to notice(especially for me) in .load .load() function is that whenever we call this function, it actually not just refreshes div content with new data , but makes request to the provided url and on that page(which url we提供）查找div选择器，获取它的内容，然后返回并将该内容插入当前div 。

注意，如果我们不写 url, .load .load() function 将请求当前页面（请纠正我，如果我弄错了）。

希望这会帮助别人！

Answer 1

首先，您需要修复代码中的拼写错误。 在 JQuery 标识符的开头有空格将找不到所需的元素。

改变这个： $('#mydiv').load(' #mydiv'); 为此： $('#mydiv').load('#mydiv');

另外，我认为您以错误的方式使用它。

在此处查看文档

Answer 2

怎么样

$(function() { // on page load
  $('select').on("change", function() { // when the select changes
    let sortAttr = $('option:selected', this).map(function() {
      return $(this).attr('id')
    }).get(); // get an array of selected IDs
    if (sortArrr.length > 0) {
      $('#mydiv').load('http://localhost:8080/sort?sort=' + 
        sortAttr.join(',') + // make a comma delimited string
        ' #mydiv'); // copy myDiv from the result
    }
  });
})