jQuery AJAX请求丢失URL中的整数参数问题

Hey there! Let's figure out why that 1 in your /user/1 URL is going missing. Let's break this down step by step:

First, Confirm the Actual Request URL #

The most important first step is to check what URL your browser is actually sending. Here's how:

1. Open your browser's DevTools (press F12 or Ctrl+Shift+I).
2. Go to the Network tab.
3. Click the button that triggers the AJAX request.
4. Look at the Request URL of the resulting request.

• If the URL shows up as /user/ (no 1), the problem is in your frontend code.
• If it shows /user/1 correctly, the issue is on your server-side routing/parameter handling.

Check How You're Fetching the Button's URL #

Your current code uses document.activeElement to get the button, but this can be unreliable—sometimes after clicking a button, focus shifts to another form element (like an input) before your code runs, so you end up grabbing the wrong element's url attribute.

Instead, use the click event to target the exact button that was clicked. Try modifying your code like this:

// Bind click event to your buttons
$('button[method][url]').on('click', function(e) {
  e.preventDefault(); // Prevent default form submission if needed
  
  // Get attributes directly from the clicked button
  var method = $(this).attr('method').toUpperCase();
  var url = $(this).attr('url');
  
  // Add logs to verify values
  console.log('Button Method:', method);
  console.log('Button URL:', url); // This should print '/user/1'
  
  $.ajax({
    type: method,
    url: url, // Even hardcode it here temporarily to test: url: '/user/1'
    contentType: "application/json; charset=utf-8",
    data: $(form).serializeArray(),
    error: function(xhr, status) {
      alert(xhr.responseText || 'Request failed');
    }
    // ... add success handler if needed
  });
});

This way, you're guaranteed to get the attributes from the button that was actually clicked, not whatever element has focus at that moment.

Rule Out Global AJAX Modifications #

Check if there's any global AJAX setup code that might be rewriting your URL. Look for something like this in your codebase:

$.ajaxSetup({
  beforeSend: function(xhr, settings) {
    // If this modifies settings.url, it could be stripping the integer
    // Example of bad code that might cause issues:
    // settings.url = settings.url.replace(/\/\d+$/, '');
  }
});

If you find code that alters settings.url in a global hook, that's a likely culprit.

Verify Form and Data Handling #

While serializeArray() shouldn't modify your base URL, double-check:

• Your form doesn't have an action attribute that's overriding your AJAX URL (though you said you hardcoded it, so this is less likely).
• For GET requests, jQuery will append serialized data to the URL, but it should look like /user/1?param1=value1, not erase the 1.

If Frontend Looks Good, Check Server-Side #

If your DevTools confirm the request is sending /user/1, the problem is on the server:

• Check your routing configuration to make sure it correctly captures the id parameter (e.g., in Express.js, it should be app.get('/user/:id', ...)).
• Ensure the HTTP method (GET/PUT/DELETE/etc.) matches what your server is expecting for that route.
• Verify that your server code is correctly extracting the id parameter from the URL, not ignoring it.

内容的提问来源于stack exchange，提问作者Old Man Walter