15

Is it possible to submit form data as JSON, without using AJAX?

I've tried changing the enctype:

<form enctype="application/json"></form>

But that's not a valid value according on w3schools

The reason I would like this behaviour is that the requested URL will return a file, which I obviously can't do anything with if I use AJAX. I would like to send JSON data marked as Content-Type: application/json so that ASP.NET MVC will use its JSON binding.

7
  • Why exactly can't you do anything with the file? You can always write the contents out to another window... which will download the file as long as the content type is correct.
    – Josh
    Oct 4, 2011 at 4:09
  • Why can't you use a regular form POST?
    – RoccoC5
    Oct 4, 2011 at 4:13
  • 2
    Please see this SO question stackoverflow.com/questions/4256556/…
    – Prasanth
    Oct 4, 2011 at 4:20
  • @Josh I'm not sure that will work? Do you have an example?
    – jeef3
    Oct 4, 2011 at 21:09
  • 2
    @RoccoC5 If I POST JSON data in the body of the POST, then ASP.NET MVC will automagically use JSON binding. If I use the key/value pair of a normal POST it won't use the auto binding.
    – jeef3
    Oct 4, 2011 at 21:11

7 Answers 7

1

Yes, you can serialize form like an object with plugin. I write a sample for you;

//Head

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.serialize-object.js"></script>

You can download plugin from here

//Form

<form id="frm">
<input type="text" name="Model[Firstname]">
<input type="text" name="Model[Lastname]">
<input type="text" name="ModelDetail[PhoneNumber]">
...
<button type="button" onclick="sendForm()">Send</button>
</form>

//JS

function sendForm(){
model_data = $("#frm").serializeObject();
$.ajax({
url: 'YOUR_SERVICE_URL',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(model_data),
dataType: 'json',
success:function(e){
    // I know, you do not want Ajax, if you callback to page, you can refresh page here
   }
});

Good luck!

0
1

Could you use JSON.stringify() to serialize your client side object and then stuff that into a hidden input and submit your form...and then in the controller side pull it back out of the Request.Form and deserialize it into your object?

[Edit] Just saw in the comment section underneath of the original question that this was essentially a duplicate post and that this stackoverflow worked as a solution.

0

you can try;

// html

<form type="POST" action="/Home/Test">
<input id="foo" value="hede">
</form>

// dto

public class TestInDto{
 public string foo {get;set;}
}

// home controller

[HttpPost]
void Test(TestInDto inDto){
 var foo = inDto.foo;

}
0

As per W3C standards you can't pass the data like JSON using

<form enctype="application/json"></form>

Description

User agents that implement this specification will transmit JSON data from their forms whenever the form's enctype attribute is set to application/json. During the transition period, user agents that do not support this encoding will fall back to using application/x-www-form-urlencoded. This can be detected on the server side, and the conversion algorithm described in this specification can be used to convert such data to JSON.

The path format used in input names is straightforward. To begin with, when no structuring information is present, the information will simply be captured as keys in a JSON object

Reference DOC

1
0

You can now set form enctype='application/json' according to the new W3C standards published on 29 May 2014.

You can check it : http://www.w3.org/TR/html-json-forms/

1
  • 3
    I hope this is supported someday. I just tried with Chrome 45 and it encoded it as application/x-www-form-urlencoded, the same as without using enctype at all. I am unable to find any resources that document support for this, such as caniuse.com. Sep 17, 2015 at 22:19
0

You can use Form2js.It is designed by google and it is easy to use library.

https://github.com/maxatwork/form2js

Also , It can be modified according to user requirement .You can check their license .You can Find the basic examples of this javascript file using the link below:

http://form2js.googlecode.com/hg/example/test.html

-1

Try this simple store your POST array in variable and then encode it as json obj. like this-->

$postarray=($_POST);
$jsondata=json_encode($postarray);

Sorry its for PHP

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.