Javascript 如何使用切换按钮对AJAX结果进行排序

我提出了一个AJAX请求，使用Ebay的API（查找服务）获取完整的Ebay拍卖结果。它是有效的，产生了期望的结果，但现在我被困在如何最好地按价格、销售日期等过滤这些结果（在我的例子中，使用一个按钮）上

例如：我有一个变量

url

，它有一个过滤器

url+=“&sortOrder=StartTimeNewest”。我想要一个按钮在该过滤器和
url+=“&sortOrder=starttimeost”之间切换使用单击事件

我是一名学生，对JS/frameworks还没有太多的经验……到目前为止，除了从
ebay.JS
复制我的全部代码并对我想应用的每个过滤器稍加修改之外，我还没有找到最好的方法

例如：我可以创建不同的变量，比如
url1
、
url2
等等，这些变量都有我想要的过滤器，可以从附加到按钮的不同ajax请求调用它们

…但我相信有一种更好、更简单的方法可以做到这一点，而不必重复，如果能为我指明正确的方向，我将不胜感激

易趣网

$(window).load(function() {
  $('form[role="search"]').submit(function(ev)  {
    ev.preventDefault();

    var searchstring = $('input[type="text"]', this).val();

    var url = "https://svcs.ebay.com/services/search/FindingService/v1";
    url += "?OPERATION-NAME=findCompletedItems";
    url += "&SERVICE-VERSION=1.13.0";
    url += "&SERVICE-NAME=FindingService";
    url += "&SECURITY-APPNAME=BrandonE-DigIt-PRD-5cd429718-3d6a116b";
    url += "&GLOBAL-ID=EBAY-US";
    url += "&RESPONSE-DATA-FORMAT=JSON";
    url += "&REST-PAYLOAD";
    url += "&itemFilter(0).name=MinPrice";
    url += "&itemFilter(0).value=7.00";
    url += "&itemFilter(0).paramName=Currency";
    url += "&itemFilter(0).paramValue=USD";
    url += "&paginationInput.pageNumber=1";
    url += "&paginationInput.entriesPerPage=50";
    url += "&keywords=" + searchstring;
    url += "&sortOrder=StartTimeNewest";
    url += "&categoryId=176985";

    $.ajax({
      type: "GET",
      url: url,
      dataType: "jsonp",
      success: function(res){
        console.log(res);
        var items = res.findCompletedItemsResponse[0].searchResult[0].item;
        var ins = "";
        for (var i = 0; i < items.length; i++){
          ins += "<div>";
          ins += "<img src='" + items[i].galleryURL + "  '/>";
          ins += "  " + items[i].title + " - ";
          ins += "Sold for $" + items[i].sellingStatus[0].currentPrice[0].__value__;
          ins += "</div><br />";
        };
        $('.results').html(ins);
      }
    });
  });
});

$（窗口）.load（函数（）{
$（'form[role=“search”]”）。提交（函数（ev）{
ev.preventDefault（）；
var searchstring=$（'input[type=“text”]”，this.val（）；
变量url=”https://svcs.ebay.com/services/search/FindingService/v1";
url+=“？OPERATION-NAME=findCompletedItems”；
url+=“&SERVICE-VERSION=1.13.0”；
url+=“&SERVICE-NAME=FindingService”；
url+=“&SECURITY-APPNAME=BrandonE-DigIt-PRD-5cd429718-3d6a116b”；
url+=“&GLOBAL-ID=EBAY-US”；
url+=“&RESPONSE-DATA-FORMAT=JSON”；
url+=“&REST-PAYLOAD”；
url+=“&itemFilter（0）。name=MinPrice”；
url+=“&itemFilter（0）。值=7.00”；
url+=“&itemFilter（0）。参数名称=货币”；
url+=“&itemFilter（0）。参数值=美元”；
url+=“&paginationInput.pageNumber=1”；
url+=“&paginationInput.EntriesPage=50”；
url+=“&keywords=“+searchstring；
url+=“&sortOrder=StartTimeNewest”；
url+=“&categoryId=176985”；
$.ajax({
键入：“获取”，
url:url，
数据类型：“jsonp”，
成功：功能（res）{
控制台日志（res）；
var items=res.findCompletedItemsResponse[0]。搜索结果[0]。项；
var-ins=“”；
对于（变量i=0；i”；
};
$（'.results'）.html（ins）；
}
});
});
});

HTML:


搜寻
日期
价格


结果：


根据我们的评论，我创建了一个简单的类来为您生成url。
继续并仔细检查，以获得正确的值。希望这有帮助

我在代码中添加了注释，但如果您有任何问题，请立即回答


$（函数（）{
//调用单击事件
$（“[数据筛选器]”）.off（）；
$（“[data filter]”）。在（“单击”，函数（）{
设$this=$（this）；
让data=$this.data（）；
//切换值
如果（data.value==false）{
$（此）。数据（“值”，真）；
}否则{
$（此）.data（“值”，false）；
}
//创建类
让url=new buildfindCompletedItemsUrl（）；
//获取排序顺序
getSortOrder（）；
//构建url
让ajaxUrl=url.build（）；
//得到结果
GetFilteredResults（ajaxUrl，函数（结果）{
$（“正文”）。追加（$（“
”）{
文本：结果
}));
})
});
})
//带构造函数的类
函数buildfindCompletedItemsUrl（）{
this.url=”https://svcs.ebay.com/services/search/FindingService/v1";
this.defaultUrlParams={
“OPERATION-NAME”：“findCompletedItems”，
“服务版本”：“1.13.0”，
“服务名称”：“FindingService”，
“SECURITY-APPNAME”：“BrandonE-DigIt-PRD-5cd429718-3d6a116b”，
“全球ID”：“EBAY-US”，
“RESPONSE-DATA-FORMAT”：“JSON”，
“剩余有效载荷”：“，
“itemFilter（0）.名称”：“MinPrice”，
“itemFilter（0.value）：“7.00”，
“itemFilter（0）.paramName:”货币“，
“itemFilter（0.paramValue）：“USD”，
“paginationInput.pageNumber”：“1”，
“巫师”：“，
“paginationInput.EntriesPage”：“50”，
“类别ID”：“176985”
}
归还这个；
}
//查看dom并填充sortOrderParam
buildfindCompletedItemsUrl.prototype.getSortOrder=函数（）{
var$filters=$（“[data filter]”）；
设param=this.defaultUrlParams[“sortOrder”]；
让uu=这个；
$。每个（$过滤器，函数（i，f）{
设$filter=$（f）；
让数据=$filter.data（）；
设val=data.value；
如果（val==true）{
if（uu.defaultUrlParams[“排序器”]=“”）{
_.defaultUrlParams[“sortOrder”]+=data.filter；
}否则{
_.defaultUrlParams[“sortOrder”]+=“，”+data.filter；
}
}
})
};
//构建ajax调用的完整url
buildfindCompletedItemsUrl.prototype.build=函数（）{
让_url=this.url；
让keys=Object.keys（this.defaultUrlParams）；
设长度=keys.length；
for（设i=0；i


按日期排序
按价格排序
您可以在每个结果的父容器上添加
数据价格
和
数据日期
属性。您的切换按钮将查找所有这些。使用排序函数，您将重新排列DOM。好的……因此，如果我正确理解您的意思，我就不必更改ajax请求。我只是重新排序相同的结果？看来我还是会的
<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button id="mainbtn" type="submit" class="btn btn-default">Search</button>
</form>

<div class="filters col-xs-12 col-md-10 col-offset-md-1">
  <!-- TOGGLE BUTTONS WILL ALLOW RESULTS TO BE SORTED. -->
  <button type="button" class="btn btn-info btn-sm date-btn">date</button>
  <button type="button" class="btn btn-info btn-sm price-btn">price</button>
</div>
<br />
<div class="index col-xs-12 col-md-10 col-offset-md-1">
  <p class="restitle">results:</p><br />
  <div class="results"></div>
</div>