通过表单提交 JSON 通过 jquery 提交答案

【问题标题】：submit JSON through form submit via jquery通过表单提交 JSON 通过 jquery 提交
【发布时间】：2014-03-31 22:15:31
【问题描述】：

我正在尝试通过 Jquery 在 MVC 中提交表单。如果我删除表单元素，请提交作品。我的代码有什么问题？

<form id="Send" method="POST">
    <fieldset>
        <button type="button"  id="test" />
    </fieldset>    
</form>
<script type="text/javascript">
    var data = {........}

    $(function () {
        $("#test").click(function() {
            $.ajax({
                type: "POST",
                url: "http://localhost:0000/api/test",
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',

            });
        });
    });

</script>

【问题讨论】：

大概以某种方式触发了表单的默认提交动作。

标签： javascript jquery asp.net-mvc json

【解决方案1】：

由于某种原因，您的代码中未显示您的页面，它的行为可能与提交任何表单时的行为相同（通过GETting 或POSTing 对其action 属性）。但是，您可以阻止这种行为。首先，我会在表单本身提交时完成您的工作，而不是在按钮单击事件中。这将需要两个更改。 (1): 把你的按钮改回type="submit":

<button type="submit" id="test" />

和（2）：处理表单的“提交”事件，而不是按钮的“点击”事件：

    $("#Send").submit(function(e) {
        // here's where you stop the default submit action of the form
        e.preventDefault();
        // Now execute your AJAX
        $.ajax({
            type: "POST",
            url: "http://localhost:0000/api/test",
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8'
        }).done(function(response) {
            // handle a successful response
        }).fail(function(xhr, status, message) {
            // handle a failure response
        });
    });

这种方法的优点：

无论提交过程如何启动（输入按钮、按钮单击、以编程方式等），您都能正确处理提交过程。
您不必关心按钮的名称
逻辑将绑定到您期望的事件

【讨论】：

“因为您没有阻止浏览器在提交表单时执行的默认操作” 该按钮似乎是“虚拟”按钮，因此不应提交反正表格。我也认为表单是以某种方式提交的，但 OP 的代码没有显示如何/为什么。
@FelixKling：我绝对同意你的看法。我会稍微改变一下措辞。

【解决方案2】：

你需要取消默认的表单提交，否则浏览器会用表单数据对当前url进行POST请求。

$('#Send').submit(function(e) {
    e.preventDefault(); // prevents the default submission
    $.ajax(/* ... */);
]);

【讨论】：

【解决方案3】：

在表单上使用 serialize()，例如：

var data = $("#Send").serialize();

编辑：

或者，如果您绝对确定您有一个可以处理 RAW POST 的服务器端脚本，您可以将表单数据转换为对象并将其字符串化，例如：

var data = {
    'input_1': $("#Send_input_1").value(),
    'input_2': $("#Send_input_2").value(),
    ...
    'input_N': $("#Send_input_N").value()
};
data = JSON.stringify(data);

【讨论】：

不会生成 JSON。
@FelixKling - JSON.stringify() 也不生成 JSON。这是您需要发布的字符串。使用第一个变体，您可以在服务器端轻松解析变量。使用第二种变体，您将获得可能难以解析的原始发布数据。
Of course JSON.stringify() generates JSON。 JSON 是一种文本的、与语言无关的数据交换格式。 JSON.stringify() 返回一个包含 JSON 的字符串。它还应该返回什么？
@FelixKling：正是我一直在指出的 - 它返回一个字符串而不是 JSON 对象。请记住，dataType 是您对服务器的期望，而不是您发送给它的内容。干杯:)
There is no such thing as a "JSON object"。您似乎将 JavaScript 对象与 JSON 混淆了。没错，dataType 描述了响应格式，但contentType 描述了 request 中数据的格式，并且设置为 'application/json; charset=utf-8'。

【解决方案4】：

如果您不想删除表单标签，请将按钮标签更改为具有按钮 (css) 外观的锚点并绑定点击事件：

<a id = "test" href = "#">test</a>

【讨论】：