Question

我做了一个AJAX请求，使用Ebay的API（查找服务）获取完成的Ebay拍卖结果。它有效，产生了预期的结果，但现在我仍然坚持如何最好地按价格，销售日期等过滤这些结果（在我的情况下，使用按钮）。

例如：我的变量url包含过滤器url += "&sortOrder=StartTimeNewest";。我想要一个按钮，使用点击事件在该过滤器和url += "&sortOrder=StartTimeOldest";之间切换。

我是一名学生，而且在JS /框架方面相当缺乏经验......到目前为止，除了从ebay.js复制我的整个代码之外，还没有太多运气找出最佳方法。我希望应用的每个过滤器稍微改变一下。

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

...但我确信有一种更好，更简单的方法可以做到这一点而不会如此重复，并且会感谢任何指导我指向正确方向的帮助。

Ebay.js

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

HTML：

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

Answer 1

根据我们的评论，我创建了一个简单的类，它将为您生成URL。继续调整它以获得正确的值。希望这有帮助！

我在代码中添加了注释，但如果您有任何问题，请注意。

$(function() {

  // invoke click event
  $("[data-filter]").off();
  $("[data-filter]").on("click", function() {
    let $this = $(this);
    let data = $this.data();
    // toggle value
    if (data.value == false) {
      $(this).data("value", true);
    } else {
      $(this).data("value", false);
    }

    // create class
    let url = new buildfindCompletedItemsUrl();

    // get the sort order
    url.getSortOrder();

    // build the url
    let ajaxUrl = url.build();

    // get the results
    GetFilteredResults(ajaxUrl, function(results) {
      $("body").append($("<p />", {
        text: results
      }));
    })
  });
})


// class with contructor
function buildfindCompletedItemsUrl() {
  this.url = "https://svcs.ebay.com/services/search/FindingService/v1";
  this.defaultUrlParams = {
    "OPERATION-NAME": "findCompletedItems",
    "SERVICE-VERSION": "1.13.0",
    "SERVICE-NAME": "FindingService",
    "SECURITY-APPNAME": "BrandonE-DigIt-PRD-5cd429718-3d6a116b",
    "GLOBAL-ID": "EBAY-US",
    "RESPONSE-DATA-FORMAT": "JSON",
    "REST-PAYLOAD": "",
    "itemFilter(0).name": "MinPrice",
    "itemFilter(0).value": "7.00",
    "itemFilter(0).paramName": "Currency",
    "itemFilter(0).paramValue": "USD",
    "paginationInput.pageNumber": "1",
    "sortOrder": "",
    "paginationInput.entriesPerPage": "50",
    "categoryId": "176985"
  }
  return this;
}

// looks at the dom and fills the sortOrderParam
buildfindCompletedItemsUrl.prototype.getSortOrder = function() {
  var $filters = $("[data-filter]");
  let param = this.defaultUrlParams["sortOrder"];
  let _ = this;
  $.each($filters, function(i, f) {
    let $filter = $(f);
    let data = $filter.data();
    let val = data.value;
    if (val == true) {
      if (_.defaultUrlParams["sortOrder"] == "") {
        _.defaultUrlParams["sortOrder"] += data.filter;
      } else {
        _.defaultUrlParams["sortOrder"] += "," + data.filter;
      }
    }
  })
};

// builds the full url for the ajax call
buildfindCompletedItemsUrl.prototype.build = function() {
  let _url = this.url;
  let keys = Object.keys(this.defaultUrlParams);
  let length = keys.length;
  for (let i = 0; i < length; i++) {
    let key = keys[i];
    let val = this.defaultUrlParams[key];
    if (i == 0) {
      _url += `?${key}=${val}`;
    } else {
      _url += `&${key}=${val}`;
    }
  }
  return _url;
}


// get your results and return them
function GetFilteredResults(url, callback) {
  // do ajax here 
  return callback(url)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-filter="date" data-value="false">Sort By Date</button>
<button data-filter="price" data-value="false">Sort By Price</button>

如何使用切换按钮

1 个答案: