如何通过Ajax获取表格内id为btn-tiquetes的按钮数据？

Hey there! Let's work through this problem step by step. It sounds like you're trying to grab info from the button with ID btn-tiquetes inside a table using Ajax, then pass that data to another page. Let's break this down into manageable parts with working code examples and common pitfalls to avoid.

First, let's cover how to properly trigger an Ajax request when interacting with the button, and fetch the necessary data (either from the button's own attributes or a server endpoint).

Example 1: Native JavaScript Ajax #

If you're using plain JS, this is a reliable implementation:

// Attach click handler to the button
document.getElementById('btn-tiquetes').addEventListener('click', function(e) {
  e.preventDefault(); // Stop default button action (e.g., page jump if it's an <a> tag)
  
  // Grab data directly from the button (custom data attributes work great here)
  const buttonMetadata = {
    tiqueteId: this.dataset.tiqueteId, // Assumes button has data-tiquete-id="123"
    buttonText: this.textContent.trim()
  };

  // Set up the Ajax request
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/your-server-api-endpoint', true); // Replace with your actual endpoint
  xhr.setRequestHeader('Content-Type', 'application/json');

  // Handle successful response
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      try {
        // Parse server response (adjust if your server returns plain text instead of JSON)
        const fetchedData = JSON.parse(xhr.responseText);
        // Now pass this data to the next page
        sendDataToNextPage(fetchedData);
      } catch (err) {
        console.error('Failed to parse server response:', err);
      }
    } else {
      console.error('Ajax request failed:', xhr.statusText);
    }
  };

  // Handle network errors
  xhr.onerror = function() {
    console.error('Network error occurred while fetching data');
  };

  // Send the request with the button's metadata
  xhr.send(JSON.stringify(buttonMetadata));
});

Example 2: jQuery Ajax (If You Use jQuery) #

If you're more comfortable with jQuery, here's a clean version:

$('#btn-tiquetes').on('click', function(e) {
  e.preventDefault();
  
  $.ajax({
    url: '/your-server-api-endpoint',
    method: 'POST',
    data: {
      tiqueteId: $(this).data('tiquete-id')
    },
    dataType: 'json',
    success: function(fetchedData) {
      sendDataToNextPage(fetchedData);
    },
    error: function(xhr, status, err) {
      console.error('Ajax error:', err);
    }
  });
});

Once you have the data, there are 3 common, reliable ways to send it to your target page:

Method 1: URL Query Parameters (Best for Small, Non-Sensitive Data) #

Encode the data and append it to the target URL. This is simple and works for most cases:

function sendDataToNextPage(data) {
  // Convert data to URL-safe query parameters
  const queryString = new URLSearchParams(data).toString();
  // Redirect to the target page with parameters
  window.location.href = `/your-target-page?${queryString}`;
}

On the target page, retrieve the data like this:

const urlParams = new URLSearchParams(window.location.search);
const tiqueteId = urlParams.get('tiqueteId');
const tiqueteDetails = urlParams.get('tiqueteDetails');
// Use the data as needed

Method 2: SessionStorage (Good for Larger Data) #

Store the data in sessionStorage (which clears when the browser session ends) before redirecting. This avoids cluttering the URL:

function sendDataToNextPage(data) {
  // Store data as a JSON string
  sessionStorage.setItem('tiqueteData', JSON.stringify(data));
  // Redirect to target page
  window.location.href = '/your-target-page';
}

On the target page, retrieve and clean up the data:

const tiqueteData = JSON.parse(sessionStorage.getItem('tiqueteData'));
// Remove the data from sessionStorage to avoid leftover values
sessionStorage.removeItem('tiqueteData');

Method 3: Hidden Form Fields (For Form-Based Workflows) #

If your button is part of a form, you can populate hidden fields with the fetched data and submit the form:

<!-- Add this form to your current page -->
<form id="tiqueteForm" action="/your-target-page" method="POST">
  <input type="hidden" id="hiddenTiqueteData" name="tiqueteData">
  <button type="submit" id="btn-tiquetes">Send Data</button>
</form>

Then update your Ajax success handler to populate and submit the form:

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const fetchedData = JSON.parse(xhr.responseText);
    document.getElementById('hiddenTiqueteData').value = JSON.stringify(fetchedData);
    document.getElementById('tiqueteForm').submit();
  }
};

• Unique ID Check: Ensure btn-tiquetes is the only element with that ID on the page. Duplicate IDs will break getElementById or jQuery selectors.
• Prevent Default Action: Always use e.preventDefault() if your button is an <a> tag or form submit button—otherwise, the page might redirect before the Ajax request finishes.
• CORS Errors: If your Ajax request goes to a different domain, make sure the server is configured to allow cross-origin requests (CORS).
• Valid JSON Response: Double-check that your server returns valid JSON. Wrap your parsing in a try-catch block to handle invalid responses gracefully.

Hope these examples help you get it working! If you have specific error messages or existing code snippets you can share, we can refine this further.

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