如何移除jQuery smoothState默认设置？解决表单跨域请求受阻问题

Hey there, let's break down what's happening and how to fix this problem:

Why This Error Occurs #

jquery.smoothstate.js is built to intercept page navigation and form submissions, loading content via AJAX to create smooth transition effects. When your form tries to submit to an external domain, smoothState automatically attempts an AJAX request to that cross-origin URL—but browsers block this due to the Same Origin Policy, which is exactly the error you're seeing. Disabling smoothState removes this AJAX interception, so your form submits normally as expected.

Solution 1: Blacklist Your Form to Bypass smoothState #

The simplest fix is to tell smoothState to ignore your form entirely using the blacklist option. This way, it won't intercept the form's submission, letting it behave like a standard HTML form.

Here's how to implement this:

// Initialize smoothState on your page container (adjust the selector to match your setup)
$('#page-container').smoothState({
  // Add your form's ID and submit button to the blacklist
  blacklist: '#form, input[type="submit"]'
});

The blacklist accepts CSS selectors for elements you don't want smoothState to handle. Adding your form and its submit button ensures the submission skips smoothState's AJAX logic entirely.

Solution 2: Customize Form Submission Behavior #

If you want to keep smoothState's other features but override how it handles your specific form, use the onFormSubmit callback to bypass the default AJAX handling and trigger a native form submit.

Try this code snippet:

$('#page-container').smoothState({
  onFormSubmit: function($form, event) {
    // Prevent smoothState's default AJAX form processing
    event.preventDefault();
    // Trigger the browser's native form submission
    $form[0].submit();
  }
});

Removing Default smoothState Behaviors #

To "remove default values" (aka override smoothState's default settings), you just need to explicitly set the option to your desired value when initializing the plugin. For example:

• Disable prefetching (a default feature) with prefetch: false
• Change the default loading class with loadingClass: 'your-custom-loading-class'

All default options are documented in the smoothState.js repository—you can override any of them by including the key-value pair in your initialization configuration.

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