AJAX请求不会加载新请求

Question

我有两个按钮调用 search_by_category 函数，该函数向服务器执行AJAX请求（服务器返回JSON产品数组）。

HTML按钮：

<button onclick="search_by_category('s')">
<button onclick="search_by_category('t')">

search_by_category功能为：

function search_by_category(product_category) {


  if (product_category == "") {
    $('#products_section').html('no products');
    return;
  }
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = show_products;
  xhttp.open("GET", "search_products.php?category="+product_category, true);
  xhttp.send();
}

，show_product功能为：

function show_products(){

    if (this.readyState == 4 && this.status == 200) {

        var results=JSON.parse(this.responseText);
        if (results.length == 0) {
          $("#products_section").html("no product found");
        }
        else{
          $("#products_section").html("")
          var num_results=results.length;
          var product;
          for (var i=0;i<num_results;i++) {
            product= results[i];
            $("#products_section").append('<div> ..product information ..</div>');
           }
        }
}
}

如果我第一次点击一个按钮就行了，但是当我点击另一个按钮时它没有加载新内容，有人知道为什么吗？