无法使用 jquery 使用 Web api 发布数据答案

【问题标题】：Unable to use jquery to POST data using Web api无法使用 jquery 使用 Web api 发布数据
【发布时间】：2021-05-03 14:50:16
【问题描述】：

我什至无法使用 jQuery 提醒消息，我的代码有什么问题？当我使用 post man 时，我能够添加到数据库中。

我想使用 post 方法将数据发布到数据库中

查看：

@model API.Models.Customers


@{
    ViewBag.Title = "New";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>New Form</h2>

<div id="container">
    <form>
        <div class="form-group" id="Name">
            @Html.LabelFor(m => m.Name)
            @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
        </div>

        <br />
        <p id="demo"></p>

        <button type="submit" class="btn btn-primary js-Add">Save</button>
    </form>
    </div>



    @section scripts {

    <script type="text/javascript">
        $(document).ready(function () {
            
            $("#container .js-Add").on("click", function () {
                var button = $(this);
                if (confirm("Are you sure you want to ADD this customer?")) {
                    var input = $("Name").val();
                    $.ajax({
                        url: "/api/Customer/CreateCustomer",
                        type: "POST",
                        data: input,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            alert('HELLO' + response.Name);
                        }
                    });
                }
            });
        });
    </script>
}

API 控制器：

[HttpPost]
    public IHttpActionResult CreateCustomer(Customers CustomerDTO)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest();
        }
      
        _context.Customerss.Add(CustomerDTO);
        _context.SaveChanges();

        return Created(new Uri(Request.RequestUri + "/" + CustomerDTO.Id), CustomerDTO);

    }

MVC 控制器

public ActionResult New(Customers customers)
    {
       
        return View(customers);
    }

问题出在哪里？

【问题讨论】：

您需要取消表单提交。
console.log 响应

标签： jquery asp.net .net api

【解决方案1】：

请将您的 div id 属性值更改为其他值，而不是 Name。例如将其更改为 <div class="form-group" id="NameGroup"> 然后您可以将您的 JS 代码更改为以下内容：

$(function () {
            $("#container .js-Add").click(function (e) {

                e.preventDefault();

                if (confirm("Are you sure you want to ADD this customer?")) {

                    let personName = $("#Name").val();

                    $.ajax({
                        url: "/home/PostPerson",
                        type: "POST",
                        data: { Name: personName },
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            alert('HELLO' + response.Name);
                        }
                    });
                }
            });
        });

不要忘记根据您的对象更改您发布的对象。

【讨论】：

【解决方案2】：

您的标题/内容类型必须与您发布的数据相匹配。因此，如果您将数据转换为 JSON，它应该可以工作。你可以使用JSON.stringify(your data)

【讨论】：