如何提交通过jQuery GET请求获取的API返回自动提交HTML表单？

Got it, let's work through this problem. When you fetch that HTML content using $.get, the <body>'s onload event won't trigger automatically—since the main page has already finished loading by the time you get the response. So we need to handle the form submission manually, and here are two reliable approaches:

Approach 1: Extract Form Data and Submit via AJAX #

This method is clean because we don't have to inject the entire HTML into your page—we just pull out what we need to submit the form.

$.get("example.html", function(data) {
  // Convert the returned HTML into a jQuery object
  const $form = $(data).find('#submitOnLoad');
  
  // Make sure we found the form
  if ($form.length) {
    // Grab form attributes
    const actionUrl = $form.attr('action');
    const requestMethod = $form.attr('method') || 'POST'; // Default to POST if not set
    
    // Serialize all form data (includes all inputs with a "name" attribute)
    const formData = $form.serialize();
    
    // Submit via AJAX
    $.ajax({
      url: actionUrl,
      method: requestMethod,
      data: formData,
      success: function(response) {
        console.log("Form submitted successfully!", response);
        // Handle success here (e.g., show a message to the user)
      },
      error: function(xhr, status, error) {
        console.error("Form submission failed:", error);
        // Handle errors here
      }
    });
  }
});

Approach 2: Inject the HTML and Trigger Form Submission #

If you need to replicate the exact behavior of the original page (or if the form has file inputs that AJAX can't handle easily), you can inject the fetched HTML into a hidden container and trigger the submit manually.

$.get("example.html", function(data) {
  // Create a hidden container to hold the fetched HTML
  const $hiddenContainer = $('<div style="display: none;"></div>').appendTo('body');
  
  // Load the HTML into the container
  $hiddenContainer.html(data);
  
  // Find the form and trigger submission
  const targetForm = document.getElementById('submitOnLoad');
  if (targetForm) {
    targetForm.submit(); // Uses native form submission (works with cross-domain actions)
  }
  
  // Clean up the hidden container after a short delay
  setTimeout(() => $hiddenContainer.remove(), 100);
});

Key Notes to Keep in Mind #

• Cross-Domain Considerations: If the form's action points to a different domain, AJAX submissions will hit CORS restrictions. In that case, use the second approach—native form submissions aren't subject to CORS rules for standard POST requests.
• Form Inputs: Make sure all form inputs you want to submit have a name attribute—serialize() only picks up elements with a name.
• Avoid Reliance on onload: Dynamic HTML content's onload events never fire automatically, so always handle submission explicitly like we did above.

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