jquery - 提交新值Spring boot jquery时刷新数据而不重新加载页面

Question

我正在尝试在提交新值时进行更新并显示数据。我希望当我点击提交时，新数据被添加到数据库中并自动更新和显示，而无需重新加载页面。但我不知道怎么写这是我获取数据的jQuery代码

获取.js

$(document).ready(function () {
  // FETCHING DATA FROM JSON FILE
  $.get('get', function (data) {
    var student = '';

    // ITERATING THROUGH OBJECTS
    $.each(data, function (key, value) {
      //CONSTRUCTION OF ROWS HAVING
      // DATA FROM JSON OBJECT
      student += '<tr>';
      student += '<td>' + value.id + '</td>';

      student += '<td>' + value.name + '</td>';

      student += '</tr>';
    });

    //INSERTING ROWS INTO TABLE
    $('#table').append(student);
  });
});

这是发送数据的代码

post.js

$('#submit').click(function () {
  var id = $('#id').val();
  var name = $('#name').val();

  // Returns successful data submission message when the entered information is stored in database.
  var dataString = 'id=' + id + '&name=' + name;
  if (id == '' || name == '') {
    alert('Please Fill All Fields');
  } else {
    // AJAX Code To Submit Form.
    $.ajax({
      type: 'POST',
      url: 'save',
      data: dataString,
      cache: false,
      success: function (result) {
        alert(result);
      },
    });
  }
  return false;
});

和 html

<table id="table">
  <!-- HEADING FORMATION -->
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
</table>

<div id="form">
  <h3>Fill Your Information !</h3>
  <div>
    <label>Name :</label>
    <input id="id" type="text" />
    <label>Email :</label>
    <input id="name" type="text" />

    <input id="submit" type="button" value="Submit" />
  </div>
</div>

上述 2 个代码可以很好地成功检索和发送数据。但是，我希望 get 函数在提交数据时自动刷新和显示，而无需重新加载页面。

标签： jqueryajaxspring