时间戳

首页 > 解决方案 > 想在一个文档就绪功能中使用多个 ajax 调用

javascript - 想在一个文档就绪功能中使用多个 ajax 调用

问题描述

我正在尝试制作一个具有分页功能和搜索功能的页面。

我们的目标是制作一个像这样工作的网站：

  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>部分中。由于发布限制，抱歉没有显示所有代码。

标签： javascriptjqueryajaxpost

解决方案

您的问题中没有足够的信息让我们帮助您。错误和问题的描述也需要更具体。与此同时，我添加了一些评论：

  • 帮助消除一些可能的错误
  • 缩小代码可能与我认为你想做的事情相关的范围
  • 可能有助于未来的编码

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

推荐阅读