javascript - How to get FormData object and submit the form data by ajax use asp.net mvc - Stack Overflow

admin管理员组

文章数量:1403480

I would like to get a form object and submit the data to server with a button click in Asp MVC.

This is my HTML code:

<form method="post" form-sync="ajax">
  @Html.Hidden("InvtId", item.InvtId)
</form>

This is my JS code:

$(document).on("click", "[form-sync='ajax']", function() {
  var formdata = new FormData($(this).closest("form")),
    url = $(this).data("url");
  $.ajax({
    url: url,
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function(response) {
      alert(response.message);
      return false;
    },
  });
});

This is my MVC code:

var data = Request["InvtId"];

The problem is the data variable is empty

Any help would be greatly appreciated, thanks.

I would like to get a form object and submit the data to server with a button click in Asp MVC.

This is my HTML code:

<form method="post" form-sync="ajax">
  @Html.Hidden("InvtId", item.InvtId)
</form>

This is my JS code:

$(document).on("click", "[form-sync='ajax']", function() {
  var formdata = new FormData($(this).closest("form")),
    url = $(this).data("url");
  $.ajax({
    url: url,
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function(response) {
      alert(response.message);
      return false;
    },
  });
});

This is my MVC code:

var data = Request["InvtId"];

The problem is the data variable is empty

Any help would be greatly appreciated, thanks.

• javascript
• jquery
• html
• asp

Share Improve this question Follow edited Jul 15, 2016 at 15:17 user5870134 asked Jul 15, 2016 at 14:22 denli8denli8 8922 silver badges77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

• Your form-sync attribute is non standard so your HTML is invalid. You should make that a data attribute.
• You need to hook to the submit event of the form, not click.
• The FormData constructor expects a DOMElement, not a jQuery object as you are currently passing to it. You can just give the this reference as that is the DOMElement.
• The form has no data-url attribute. I assume you want the action property instead, which will default to the current page as you haven't provided one explicitly.
• The return statement in your success handler is redundant.
• You need to stop the standard form submission (as you're submitting via AJAX instead) by calling preventDefault() on the passed submit event.

Here's a plete example with all the above fixes:

<form method="post" data-form-sync="ajax">
    @Html.Hidden("InvtId", item.InvtId)
</form>

$(document).on('submit', '[data-form-sync="ajax"]', function(e) {
    e.preventDefault();
    $.ajax({
        url: this.action,
        type: 'post',
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (result) {
            alert(result.message);
        },
    });
})

The problem is that you are passing in a jQuery element and NOT a DOM element.
For the FormData to actually return what you expect, you need to pass in a DOM element to its constructor.

Here, try this instead:

var formdata = new FormData($(this).closest("form")[0]);

Another problem is that the form has no data-url attribute.
Use the action property instead, it will return the url of the current page if you have not given a url yourself.

Here, use this instead:

var url = this.action; // or $(this).prop('action');

HTML

< button type="button" class="btn btn-primary" 
onclick="saveData()">Save</button>

JS Code Inside of function saveData()

var formData = new FormData();

get values with serializeArray

var formulario = $("#miFormulario").serializeArray(); 

if there are extra data or files

formulario.push({ "name": fileName, "value": file });

add information to formData

formulario.forEach((d) => {
    formData.append(d.name, d.value); });

ajax request

 $.ajax({        
        timeout: 0,        
     url: "/InfoController/savingInfo",        
     method: "post",        
     data: formData,    
     contentType: false,   
     processData: false,   
     success: function (result) {  //do something  }   
});

Controller

 [HttpPost] public JsonResult savingInfo() {     
 if (Request.Files.Count > 0)
     { ... }    
     var data = Request.Form;      
     var valor1 = data["dato1"];
     return Json(true);

 }

本文标签： javascriptHow to get FormData object and submit the form data by ajax use aspnet mvcStack Overflow