Question

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

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

Answer 1

由于某些原因未在您的代码中显示，您的网页可能与任何表单提交时的行为相似（通过GET或POST action属性。但是，您可以阻止此行为。首先，我会在表单本身提交时执行您的工作，而不是在按钮单击事件中。这将需要两次更改。（1）：将您的按钮更改回type="submit"：

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

和（2）：处理＆＃34;提交＆＃34;表单的事件而不是＆＃34;点击＆＃34;按钮事件：

    $("#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
        });
    });

这种方法的优点：

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

Answer 2

在表单上使用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);

Answer 3

您需要取消默认表单提交，否则浏览器将使用表单数据对当前网址发出POST请求。

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

Answer 4

如果您不想删除表单标签，请使用按钮（css）的外观更改锚点的按钮标签并绑定click事件：

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

通过jquery提交表单提交JSON

4 个答案: