使用 AJAX 将数据从 HTML 表单提交到 WebMethod

Question

所以我从 HTML 表单中获取数据，然后使用 AJAX 将数据发送到 Web 方法，然后再发送到 sqlite 数据库，但是我的 AJAX 通话失败。我搞砸了什么？我做得对吗？

HTML表格

<form id="addForm" >
     <input type="text"  name="playername" id="playername" placeholder="Player"/> 
     <input type="text" name="points" id="points" placeholder="Points" />
     <input type="text" name="steals" id="steals" placeholder="Steals" />
     <input type="text" name="blocks" id="blocks" placeholder="Blocks" /> 
     <input type="text" name="assists" id="assists" placeholder="Assists" />
     <input type="text" name="mpg" id="mpg" placeholder="MPG" /> 
     <input type="text" name="shotpct" id="shotpct" placeholder="Shot %" />
     <input type="text" name="threepct" id="3pct" placeholder="3 %" /> 
     <input type="button" value="add player" id="addbtn" name="addbtn" />
     </form>

AJAX

 $("#addbtn").click(function () {
                var form = $("#addForm").serializeArray();
                $.ajax({
                    type: 'POST',
                    url: "players.aspx/addRow",
                    data: JSON.stringify(form),
                    dataType: 'json',
                    success: function () {
                        alert('success');
                    },
                    error: function () {
                        alert('failure');
                    }
                });
                    });

和 web 方法（未完成，只是测试我是否正在获取数据）

[WebMethod]
        public static void addRow(object form)
        {
            var stuff = form;
        }

我仍在学习如何使用很多这些东西，因此非常感谢您的帮助。

Answer 1

替换

JSON.stringify(form)

和

$('form').serializeArray()

所以你将拥有：

$("#addbtn").click(function () {
                var form = $("form").serializeArray();
                $.ajax({
                    type: 'POST',
                    url: "players.aspx/addRow",
                    data: form,
                    dataType: 'json',
                    success: function () {
                        alert('success');
                    },
                    error: function () {
                        alert('failure');
                    }
                });
                    });

如果仍然报错。您调用的页面可能存在服务器端问题。为了确保这一点，我建议您使用 'Advanced REST client' 是一个 Google Chrome 扩展，您可以用它测试发布值并查看结果。

Answer 2

替换

type: 'POST',

和

method: 'POST',

数据类型：'json' 不需要，因为您没有收到数据。从服务器返回的数据，根据 dataType 参数进行格式化。

同时删除 JSON.stringify(form)，这已经用 .serialize() 完成了；

使用 AJAX 将数据从 HTML 表单提交到 WebMethod

Use AJAX to submit data from HTML form to WebMethod

forms

asp.net

ajax

webmethod