Хотите использовать много вызовов ajax в одной функции готовности документа

Question

Я пытаюсь создать страницу с функцией разбиения на страницы и функцией поиска.

Цель состоит в том, чтобы сделать сайт, который работает как:

1. Когда страница открыта, клиент запрашивает все данные с сервера и отображает данные
2. Когда пользователь хочет выполнить поиск, пользователь может поместить любое слово на вкладке поиска, и после того, как пользователь нажмет кнопку поиска, клиент запросит поиск на сервере и получит все результаты, такие как слово, и отобразит их с нумерацией страниц

Я пытался создать несколько готовых для документов функций, но это не сработало.

Вот мой код JavaScript:

$(document).ready(function() {
var = XXX

//    The first ajax call when opening the page

$.ajax({
  type: "get",
  url: "http://localhost:8080/product/getAll",
  async: true,
  dataType: 'json',
  success: function(data) {
    XXX
  }
});

//    The code when search button is pressed

$('productSearchBtn').click(function() {
  $.ajax({
    type: "POST",
    url: "http://localhost:8080/product/getProduct",
    async: true,
    data: {
      productName: $('productSearchName').val()
    },
    async: true,
    dataType: 'json',
    success: function(data) {
      XXX
    }
  });
});


//    Function for generating table

function generate_table() {
  XXX
}

//    function for applying pagination

function apply_pagination() {
  XXX
}
});
}
});

Весь этот код находится в одном <script></script> разделе. Извините, что не показываю весь код из-за ограничений публикации.

Answer 1

В вашем вопросе недостаточно информации, чтобы мы могли вам помочь.Описание ошибок и вопросов также должно быть более конкретным.Тем временем я добавил несколько комментариев:

• помогает устранить несколько возможных ошибок
• сузить область, в которой код может быть связан с тем, что, я думаю, вы хотите сделать
• возможно, поможет с будущим кодированием

//OXi: named functions can be declared before $(document).ready()

//Function for generating table
function generate_table() {
  //XXX
}

//function for applying pagination
function apply_pagination() {
  //XXX
}

$(document).ready(function() {
  //var = XXX //OXi: commenting this out since it's not used and messes with tidy code; proper delcaration would have a variable name, use quotes for strings, and close with a semi-colon

  //The first ajax call when opening the page
  $.ajax({
    type: "get",
    url: "http://localhost:8080/product/getAll", //OXi: "http://localhost:8080" can be removed because any path starting with "/" is automatically fetched from localhost webroot
    async: true, //OXi: not needed, true by default
    dataType: 'json',
    success: function(data) {
      //XXX //OXi: if your page does not load or paginate correctly, it could be because of the code here
    }
  });

  //The code when search button is pressed
  $('productSearchBtn').click(function() { //OXi: is productSearchButton a class or id? Class needs a period in front. Id needs a hashtag in front. ".on('click', function()" is the recommended style for assigning event handlers in jQuery.
    $.ajax({
      type: "POST",
      url: "http://localhost:8080/product/getProduct",
      async: true,
      data: {
        productName: $('productSearchName').val() //OXi: is productSearchName a class or id?
      },
      async: true, //OXi: duplicate parameter, still not necessary even the first time
      dataType: 'json',
      success: function(data) {
        //XXX //OXi: if your search is not working correctly, it could be because of the code here
      }
    });
  });

});

//OXi: extraneous closures below here, possibly from other code that was deleted?
//}
//});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>