以 JSON 形式提交表单（无 AJAX）

发布于 2024-12-07 22:04:38 字数 398 浏览 0 评论 0原文

是否可以在不使用 AJAX 的情况下以 JSON 形式提交表单数据？

我尝试更改 enctype：

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

但这不是一个有效的值，根据 w3schools

原因我希望这种行为是请求的 URL 将返回一个文件，如果我使用 AJAX，我显然无法对其执行任何操作。我想发送标记为 Content-Type: application/json 的 JSON 数据，以便 ASP.NET MVC 使用其 JSON 绑定。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流心雨 2024-12-14 22:04:38

是的，您可以使用插件像对象一样序列化表单。我给你写了一个样本；

//Head

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

您可以从此处下载插件

//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
   }
});

祝你好运！

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 原文

我一直都在从未离去 2024-12-14 22:04:38

您可以使用 JSON.stringify() 序列化您的客户端对象，然后将其填充到隐藏输入中并提交您的表单...然后在控制器端将其从 Request.Form 中拉回并将其反序列化到您的对象中？

[编辑]
刚刚在原始问题下面的评论部分看到，这本质上是重复的帖子，并且这个 stackoverflow 是一个解决方案。

回复收藏 0 原文

〃温暖了心ぐ 2024-12-14 22:04:38

你可以尝试；

// html

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

// dto

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

// 主控制器

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

}

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 原文

数理化全能战士 2024-12-14 22:04:38

根据 W3C 标准，您不能使用

Description

传递JSON 等数据只要表单的 enctype 属性设置为 application/json，此规范就会从表单传输 JSON 数据。在过渡期间，不支持此编码的用户代理将回退以使用application/x-www-form-urlencoded。这可以在服务器端检测，并且可以使用本规范中描述的转换算法将此类数据转换为JSON。

输入名称中使用的路径格式很简单。首先，当不存在结构化信息时，信息将简单地被捕获为 JSON 对象

参考文档