Question

我正在尝试使用jQuery提交表单。

问题在于它返回目标网页html而不是提交表单的结果。

以下是代码：

$("#my-form").submit(function(e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);

        $.ajax({  
             type: "POST",  
             url: "http://127.0.0.1/upload.html",  
             data: formData,
             async: false,
             cache: false,
             contentType: false,
             processData: false,
             success: function(data) {
                 alert(data);
             }
        }); 
        return false;
})

因此警报（数据）返回目标页面的html。我需要它来返回结果。

我该如何解决这个问题？

控制台返回：[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Answer 1

问题是它返回目标网页html而不是提交表单的结果。

您对此回复的期望是什么？表单不会提交默认结果。

您正在将表单数据发送到upload.html，这不是服务器端资源，可以处理发布到它的表单数据并创建自定义响应，因此您将获得html页面的全部内容作为回应，因为提交的形式通常是什么。

Answer 2

您的网址：

url：＆＃34; http://127.0.0.1/upload.html＆＃34;，

需要更改为您尝试发送数据的位置。最好是连接到服务器的一些。

Answer 3

我认为您要做的是序列化表单。您可以使用jQuery serialize函数执行此操作。这应该工作，只要您正确格式化表单。选择，输入和标签必须具有正确的属性。

她是jQuery文档中的例子。

HTML ............

<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>

  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>

  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>

  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>

JAVASCRIPT ......................

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

jQuery form serialize

Jquery提交表单返回目标页面HTML

3 个答案:

HTML ............

JAVASCRIPT ......................