Question

我需要发出多个ajax请求，并且每页仅显示10个项目。这里的API：https://www.mockapi.io/docs说：将查询参数添加到GET请求中： / blogs？page = 1＆limit = 10 我只是不知道在我的Ajax请求中将其放置在何处。如果我只是将其放在URL中，将无法正常工作。我该怎么做呢？我已经包含了适当的代码。

let template = `
  {{#each items}}
    <div class="row">
      <div class="col">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="{{image}}" alt="Card image cap">
            <div class="card-block">
            <h4 class="card-title">{{title}}</h4>
            <p class="card-text">Price: &#36;{{price}}</p>
            <a href="#" data-name="{{title}}" data-price="{{price}}" class="add-to-cart">Add to cart</a>
            </div>
          </div>
      </div>
    </div>
  {{/each}}
`;

function render(context) {
  let compiled = Handlebars.compile(template);
  itemsElement.innerHTML = compiled(context);

$.ajax({
url: 'http://5ceb36a60c871100140bf873.mockapi.io/v1/item?page=1&limit=10',
method: 'GET'
}).done(function (resp) {
items = {items : resp}
render(items);
});

下一页按钮：

int page = 0;

function nextPage() {
  $.ajax({
    page += 1;
    url: 'http://5ceb36a60c871100140bf873.mockapi.io/v1/item?page=' + encodeURIComponent(page) + '&limit=10',
    method: 'GET'
    }).done(function (resp) {
    items = {items : resp}
    render(items);
    });
}

Answer 1

您必须将url和参数分开。

$.ajax({
   url: 'http://5ceb36a60c871100140bf873.mockapi.io/v1/item',
   type: 'GET',
   data: 'page=1&limit=10',
}).done(function (resp) {
        items = {items : resp}
        render(items);
});

如何在ajax GET请求中添加参数？

1 个答案: