Ajax单次加载数据实现求助，附点击Div加载数据代码

Hey there! Let's go through your current code and refine it to make it more functional, robust, and user-friendly. Here are key improvements and a polished version of your code:

1. Connect the Click Event to Your Search Function #

Right now, your click handler for #data is empty—you need to actually call searchData when the div is clicked. You can pass a section value either as a fixed parameter, or pull it from a data attribute on the div (which is more flexible):

$('#data').on('click', function () {
  // Get section value from the div's data attribute (e.g., <div id="data" data-section="users">)
  const section = $(this).data('section');
  searchData(section);
});

2. Add Error Handling #

Your Ajax request doesn't account for failures (like network issues or server errors). Adding an error callback ensures you can debug issues and inform users something went wrong:

function searchData(section) {
  return $.ajax({
    type: 'GET',
    dataType: 'json',
    url: '/user/getresults',
    data: { q: section },
    success: function(data) {
      // Handle success here (we'll fill this in next)
    },
    error: function(xhr, status, error) {
      console.error('Failed to load data:', error);
      // Show user-friendly message, e.g.:
      // $('#results').html('<p>Oops, failed to load data. Please try again later.</p>');
    }
  });
}

3. Implement Success Logic & Remove Redundant Code #

The var result = data; line is unnecessary—you can use data directly. Most importantly, you need to add code to render the successful response to the page:

success: function(data) {
  const $resultsContainer = $('#results-container');
  
  if (data.success) {
    // Clear existing content first
    $resultsContainer.empty();
    
    // Assume data.results is an array of items to display
    data.results.forEach(item => {
      $resultsContainer.append(`<div class="result-item">${item.title}</div>`);
    });
  } else {
    // Handle cases where success is false (e.g., no results)
    $resultsContainer.html('<p>No results found for this section.</p>');
  }
}

4. Prevent Duplicate Requests #

If a user clicks the div multiple times quickly, it will send duplicate Ajax calls. Add a loading state to block repeated clicks until the request finishes:

$('#data').on('click', function () {
  const $div = $(this);
  
  // Exit if already loading
  if ($div.hasClass('loading')) return;
  
  // Add loading state (update text/style as needed)
  $div.addClass('loading').text('Loading...');
  
  const section = $div.data('section');
  
  searchData(section)
    .always(function() {
      // Reset state once request completes (success or failure)
      $div.removeClass('loading').text('Load Data');
    });
});

5. Use Modern JavaScript (Optional but Recommended) #

Swap var for const/let and use arrow functions for cleaner, more maintainable code:

const searchData = (section) => {
  return $.ajax({
    type: 'GET',
    dataType: 'json',
    url: '/user/getresults',
    data: { q: section },
    success: (data) => {
      const $resultsContainer = $('#results-container');
      
      if (data.success) {
        $resultsContainer.empty();
        data.results.forEach(item => {
          $resultsContainer.append(`<div class="result-item">${item.title}</div>`);
        });
      } else {
        $resultsContainer.html('<p>No results found.</p>');
      }
    },
    error: (xhr, status, error) => {
      console.error('Request error:', error);
      $('#results-container').html('<p>Failed to load data. Please retry.</p>');
    }
  });
};

$('#data').on('click', function () {
  const $div = $(this);
  if ($div.hasClass('loading')) return;
  
  $div.addClass('loading').text('Loading...');
  const section = $div.data('section');
  
  searchData(section).always(() => {
    $div.removeClass('loading').text('Load Data');
  });
});

内容的提问来源于stack exchange，提问作者trazy97