Refresh data without reloading page when submitting a new value Spring boot jquery

Viewed 535

I am trying to do an update and display the data when I submit a new value. I want when I click submit, the new data is added to the database and automatically updated and displayed without having to reload the page. But I don't know how to write it Here is my jQuery code to get the data

Get.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);
  });
});

This is the code to send the data

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;
});

and 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>

The above 2 codes work well for successfully retrieving and sending data. However, I want the get function to automatically refresh and display when submitting data without having to reload the page.

0 Answers
Related