如何通过Jquery将记录保存到MVC模型输入后在Html中显示

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<form id="myForm">
  <input type="text" id="recordInput" />
  <button type="submit">保存记录</button>
</form>

$(document).ready(function() {
  $('#myForm').submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var record = $('#recordInput').val(); // 获取输入的记录值

    // 发送AJAX请求保存记录到MVC模型
    $.ajax({
      url: '/saveRecord', // 后端保存记录的接口地址
      method: 'POST',
      data: { record: record }, // 将记录作为参数传递给后端
      success: function(response) {
        // 保存成功后，在HTML页面中显示保存的记录
        $('#recordDisplay').text(response.savedRecord);
      },
      error: function() {
        alert('保存记录失败');
      }
    });
  });
});

<div id="recordDisplay"></div>