通过 AJAX 将 JSON 数据发布到 Web API 失败，并显示“无法将 JSON 值转换为 System.Int32”

Posted 2023-04-13

【中文标题】通过 AJAX 将 JSON 数据发布到 Web API 失败，并显示“无法将 JSON 值转换为 System.Int32”

【英文标题】：Posting JSON data via AJAX to Web API fails with "The JSON value could not be converted to System.Int32"

【发布时间】：2020-03-30 17:38:51

【问题描述】：

我想将数据从我的网站发送到我的合作伙伴正在通过 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 的引号中缺少 "" 引号。但是手动添加引号会导致同样的错误。

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

【问题讨论】：

请提供您的表单代码。

添加表单代码

输入应以/> 结尾，并尝试发布结果json，以便我们可以查看无效的内容，例如JSON.stringify(data) 的结果

用“data”和“JSON.stringify(data)”的信息更新了我的帖子

【参考方案1】：

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

或

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

【讨论】：

感谢您的快速回复。应该提到我的输入类型是“数字”： 但这似乎没有奏效。相反 parseInt($("#zipCode").val()) 工作正常。谢谢^^