json - 为什么使用Ajax时输入值为NULL？(ASP.NET CORE)

Question

在 View(MVC) 中使用 Ajax 时，我无法访问输入值，但在不使用 Ajax 时，我可以访问输入值。使用Ajax时实际上值是空的

当我使用 Ajax 时:

<form id="Form1" asp-action="Register" asp-controller="UserPanel" method="post">
    <div class="row">
        <div class="col-lg-5 col-md-5 col-sm-12 col-12  .sm-right" id="margin-top">
            <span>Name:</span>
            <input type="text" asp-for="Name" class="form-control">
        </div>
        <div>
            <span>Number:</span>
            <input type="text" asp-for="Number" class="form-control">
        </div>
    </div>
    <input type="reset" value="send" id="ajax-button" class="btn btn-success btn-sm waves-effect waves-light submit-btn" />
</form>

脚本:

<script>
    $(document).ready(function () {
        var url = '@Url.Action("Register", "UserPanel")';
        var data = $('#Form1').serialize();
        $('#ajax-button').click(function () {
            debugger
            $.ajax({
                type: "POST",
                data: data,
                url: url,
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    alert('Done');
                },
                error: function () {
                    alert("error");
                }
            });
        })
    })
</script>

我添加了标签助手

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, SmsWebClient
@using Microsoft.AspNetCore.Razor.TagHelpers;

在输入ajax之前值为null，图像:

Answer 1

请移动

var data = $('#Form1').serialize();

到下面

$('#ajax-button').click(function () {

事实上，您的代码应该是:

<script>
    $(document).ready(function () {
        var url = '@Url.Action("Register", "UserPanel")';
        $('#ajax-button').click(function () {
        var data = $('#Form1').serialize();
            debugger
            $.ajax({
                type: "POST",
                data: data,
                url: url,
                success: function (result) {
                    alert('Done');
                },
                error: function () {
                    alert("error");
                }
            });
        })
    })
</script>

In your code data set when docuement loaded and for this reason the value is null