调用 load() 函数时隐藏 div 元素

Question

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

我已经检查过，有 本书需要显示在会话范围内，并且 Jquery 已正确包含。

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

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

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

$(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');
                }
            });
        })
    });
})

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

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

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

编辑

最后，我发现了发生了什么。在.load() 函数中需要注意的重要一点（尤其是对我而言）是，每当我们调用此函数时，它实际上不仅用新数据刷新 div 内容，而且还向提供的 url 发出请求that 页面（我们提供的 url）查找 div 选择器，获取它的内容，然后返回并在当前 div 中插入 that 内容。

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

希望对某人有所帮助！

Answer 1

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

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

另外，我认为你用错了。

查看文档here

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