POST 方法在使用 Jquery 时在 .NET Core MVC 中不起作用，AJAX 从视图（html 页面）调用 api？

Question

我正在使用 api 在 .net core mvc 项目中执行 CRUD 操作，并且列表存储所有数据而不是 database.I 想直接从 api 调用我的 html 页面使用 jquery 和 ajax.But 现在我坚持编辑操作（这是一种 POST 方法）。在编辑页面中，当我点击保存按钮时，它只是刷新页面，没有任何反应。

这是jquery,Ajax查看页面编辑的gievn

@section Scripts{
    <script>
        var id = localStorage.getItem("empid");
            $.ajax({
            contentType: "application/json",
            type: "GET",
            url: "https://localhost:44347/api/Values/Edit/" + id,
            success: function (data) {

                $('#id').val(data.id)
                $('#fname').val(data.fname)
                $('#lname').val(data.lname)
                $('#location').val(data.location)
                $('#contact').val(data.contact)
                $('#email').val(data.email)
                $('#password').val(data.password)
                $('#roles').val(data.roles)
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("alertt");
                $("#postResult").val(jqXHR.statusText);
            }

        });

       $('#save').click(function () {
             var obj = {};

            obj.id = $('#id').val();
            obj.fname = $('#fname').val();
            obj.lname = $('#lname').val();
            obj.location = $('#location').val();
            obj.contact = $('#contact').val();
            obj.email = $('#email').val();
            obj.password = $('#password').val();
            obj.roles = $('#roles').val();
        $.ajax({

            type: "POST",
            url: "https://localhost:44347/api/Values/Save",
              contentType: "application/json; charset=utf-8",

                data: JSON.stringify(obj),
            success: function (data) {

              window.location.href = "/Home/Details/";
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("Error occured");
                $("#postResult").val(jqXHR.statusText);
            }

             });
        });
    </script>
}

这是api在编辑页面点击保存按钮时调用的函数

[HttpPost("Save")]
        public IActionResult Save(StudentModel student)
        {
         obj1 = new StudentModel();
         obj1 = obj2.Save(student);
            if (obj1 != null)
            {
                return Ok(obj1);
            }
            return null;
        }

Answer 1

html 按钮的类型属性默认为 'submit'，请将按钮类型更改为 'button' 以解决刷新问题。

<button type="button">...</button>

Answer 2

使用它，看看它是否有效。

<h1>Register</h1>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <form id="form">
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputfname">id</label>
        <input type="text" class="form-control" name="id" id="id" readonly>
      </div>
      <div class="form-group col-md-6">
        <label for="inputlname">fname</label>
        <input type="text" class="form-control" name="fname" id="fname">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputfname">lname</label>
        <input type="text" class="form-control" name="lname" id="lname">
      </div>
      <div class="form-group col-md-6">
        <label for="inputlname">Location</label>
        <input type="text" class="form-control" name="location" id="location">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputemail">contact</label>
        <input type="text" class="form-control" name="contact" id="contact">
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputcontact">Email</label>
          <input type="email" class="form-control" name="email" id="email">
        </div>
        <div class="form-group col-md-6">
          <label for="inputemail">password</label>
          <input type="password" class="form-control" name="password" id="password">
        </div>
      </div>
      <div class="form-group col-md-4">
        <label for="inputrole">Role</label>
        <input type="text" class="form-control" name="roles" id="roles" readonly>
      </div>



    </div>
    <div class="form-group">
      <div class="form-check">



      </div>
    </div>
    <button type="button" class="btn btn-primary" id="save">Save</button>
  </form>
</body>

</html>
@section Scripts{
<script>
  var id = localStorage.getItem("empid");
  $.ajax({
    contentType: "application/json",
    type: "GET",
    url: "https://localhost:44347/api/Values/Edit/" + id,
    success: function(data) {

      $('#id').val(data.id)
      $('#fname').val(data.fname)
      $('#lname').val(data.lname)
      $('#location').val(data.location)
      $('#contact').val(data.contact)
      $('#email').val(data.email)
      $('#password').val(data.password)
      $('#roles').val(data.roles)
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert("alertt");
      $("#postResult").val(jqXHR.statusText);
    }
  });

POST 方法在使用 Jquery 时在 .NET Core MVC 中不起作用，AJAX 从视图（html 页面）调用 api？

POST method not working in .NET Core MVC while using Jquery , AJAX for calling api from View(html page)?

javascript

jquery

asp.net-ajax

asp.net-core-mvc

asp.net-core-webapi