首页 > 解决方案 > 通过 AJAX 将 JSON 数据发布到 Web API 失败,并显示“无法将 JSON 值转换为 System.Int32”

问题描述

我想将数据从我的网站发送到我的合作伙伴正在通过 AJAX 开发的 WEB API。WEB API 是一个 .net Core 3.0 应用程序。表格是注册一个新用户。

但是我在解析我的一个输入字段的输入数据时遇到了问题。

我的 JQuery 脚本如下所示:

<script type="text/javascript">
$(document).ready(function () {
    $("#postform").submit(function (e) {
        e.preventDefault();
        var apiurl = "https://luna.example.com:44350/login/register";

        var data = {
            Name: $("#fullName").val(),
            CPRNumber: $("#cprNumber").val(),
            Email: $("#Email").val(),
            Password: $("#PasswordValidated").val(),
            ZipCode: $("#zipCode").val(),
        }
        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: 'POST',
            url: apiurl,
            data: JSON.stringify(data),
            dataType: 'json',

            success: function (d) {
                alert("Saved Successfully");
                document.getElementById("postform").reset();
            },
            error: function (request) {
                alert("Error please try again");
                alert(request.responseText);
            }
        });
    });
});

表单代码如下所示:

<form id="postform">
                <div class="form-group">
                    <label for="fullName">Name</label>
                    <input type="name" class="form-control" id="fullName">
                    <small>Geben Sie Ihren ganzen Namen ein (Vor + Nachname)</small>
                </div>
                <div class="form-group">
                    <label for="cprNumber">CPR Nummer</label>
                    <input type="text" class="form-control" id="cprNumber">
                    <small>Geben Sie Ihre Dänische CPR Nummer ein</small>
                </div>
                <div class="form-group">
                    <label for="zipCode">Postleitzahl</label>
                    <input type="number" class="form-control" id="zipCode">
                    <small>Geben Sie Ihre Postleitzahl ein</small>
                </div>
                <div class="form-group">
                    <label for="Email">Email addresse</label>
                    <input type="email" class="form-control" id="Email" aria-describedby="emailHelp">
                    <small id="emailHelp" class="form-text text-muted">Deine Email wird nicht mit anderen geteilt</small>
                </div>
                <div class="form-group">
                    <label for="Password1">Passwort </label>
                    <input type="password" class="form-control" id="Password1">
                    <small>(minimum 8 Zeichen)</small>
                </div>
                <div class="form-group">
                    <label for="RepeatPassword">Passwort erneut eingeben (Bestätigen)</label>
                    <input type="password" class="form-control" id="RepeatPassword">
                </div>
         

                <button type="submit" class="btn btn-primary">Registrierung abschließen</button>
            </form>

如果我现在点击“提交”按钮,我将从我的 WebAPI 收到以下消息:

errors":{"$.ZipCode":["JSON 值无法转换为 System.Int32。路径:$.ZipCode

对邮政编码进行硬编码将成功,数据将存储在数据库中

{
            Name: $("#fullName").val(),
            CPRNumber: $("#cprNumber").val(),
            Email: $("#Email").val(),
            Password: $("#PasswordValidated").val(),
            ZipCode: 6400,
        }

尝试使用

ZipCode: $("#zipCode").val().parseInt

将阻止错误消息,但该值现在应该是未定义的,这就是服务器将作为新错误消息返回的内容。值未定义(如预期)和外键不匹配(可以忽略,因为值未定义)

“数据”的输出(没有 json.stringify):

console.log(data);
prints:
{Name: "", CPRNumber: "", Email: "", Password: "", ZipCode: "6400"}

使用 json.stringify 输出数据:

alert(JSON.stringify(data));
{"Name":"","CPRNumber":"","Email":"","Password":"","ZipCode":"6400"}

如果没有 json.stringify,我会收到以下错误消息:

{"type":"https://www.rfc-editor.org/rfc/rfc7231#section-6.5.1","title":"出现一个或多个验证错误。","status":400," traceId":"|eb442172-4475b7c4c9eb631c.","errors":{"$":["'N' 是一个无效的值开始。路径:$ | LineNumber: 0 | BytePositionInLine: 0."]}}

我很确定这是因为没有 json.stringify 的引号中缺少“”引号。但是手动添加引号会导致同样的错误。

有没有聪明的方法来解决这个问题?因为硬编码该值似乎工作正常,但从输入字段获取值失败。我猜这是因为添加了“”引号。

标签: c#jqueryjsonajaxasp.net-web-api

解决方案


请使用parseInt ($("#zipCode").val()) 转换为整数。

或者

将您的表单 zipCode 输入元素类型从文本 ( )修改为数字<input type='number' name='zipcode' id='zipcode'>


推荐阅读