通过ajax获取新提交的JSON数据的好方法是什么？

Question

When a user enters a number and clicks submit, it's sent to a url which updates my JSON page with the current number. I want to be able to display the current number without having to refresh the page at all. Is there an easy way to do this possibly using an ajax call? Below it shows the code for getting games and the data I need but I want to be able to pull that same data when the user submits so that it updates.

getGames().done(function(results){
        $.each(results, function (i, gameData){
            $.each(gameData, function(key, game){

                var gamesHome = game.home_team_conference;
                var gamesAway = game.away_team_conference;


                if(gamesHome == "Big 12" || gamesAway == "Big 12"){

                    var gameId = game.id;
                    var homeTeam = game.home_team.market;
                    var awayTeam = game.away_team.market;
                    var pointTotal = game.total_points_bet;
                    var gameTime = game.game_time_hour;
                    var gameDate = game.game_time_date;
                    var homeId = game.home_team.id;
                    var awayId = game.away_team.id;
                    var network = game.broadcast_network;
                    var homePoints = game.total_points_bet_on_hometeam;
                    var awayPoints = game.total_points_bet_on_awayteam;
                    var totalPoints = homePoints + awayPoints;
                    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
                    var hueTwo = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';


                $('.wrapper').append('\
                    <div id="'+ gameId +'" class="main-wrapper col-lg-6 col-md-6 col-sm-12">\
                    <div class="game-cards">\
                    <div class="chart-container">\
                    <canvas id="'+ homeTeam +'" width="500" height="500"></canvas>\
                    </div>\
                    <div class="right-info">\
                    <h4>' + awayTeam + '<br>' + " @ " + '<br>' + homeTeam +'</h4>\
                    <h5 id="time-channel">'+ gameDate +' @ ' + gameTime  + '<br>' + ' On ' + network +'</h5>\
                    <div class="total-points-live">\
                    <h5>Total Points Bet</h5>\
                    <h5 id="point-total">'+ totalPoints +'</h5>\
                    <p>'+ awayTeam +'</p>\
                    <input class="bet-input-away" data-away-id="'+ awayId +'" data-team-type="'+ awayTeam +'" type="number" pattern="[0-9]*" name="betAmountAway" placeholder="Wager Amount">\
                    <p>'+ homeTeam +'</p>\
                    <input class="bet-input-home" data-home-id="'+ homeId +'" data-team-type="'+ homeTeam +'" type="number" pattern="[0-9]*" name="betAmountHome" placeholder="Wager Amount">\
                    <p class="bet-button" gameid="'+ gameId +'">Click To Place Bet</p>\
                    </div>\
                    </div>\
                    </div>\
                    ');


                $('.bet-input-away').on('input', function() {
                   if($(this).val().length)
                      $('.bet-input-home').prop('disabled', true);
                   else
                      $('.bet-input-home').prop('disabled', false);
                });
                $('.bet-input-home').on('input', function() {
                   if($(this).val().length)
                      $('.bet-input-away').prop('disabled', true);
                   else
                      $('.bet-input-away').prop('disabled', false);
                });



$('.wrapper').on('click', '.bet-button', function() {
  var self = $(this);
  var gameId = self.attr('gameid');
  var awayVal = $('#' + gameId + ' input[name=betAmountAway]').val();
  var homeVal = $('#' + gameId + ' input[name=betAmountHome]').val();
  var awayId = $('#' + gameId + ' .bet-input-away').data('away-id');
  var homeId = $('#' + gameId + ' .bet-input-home').data('home-id');
  var value = awayVal || homeVal;
  var id, value;

  // If the awayVal is set, assign away info to id and value variables
  if (awayVal) {
    id = awayId;
    value = awayVal;
  }
  // If the homeVal is set, assign home info to id and value variables
  if (homeVal) {
    id = homeId;
    value = homeVal;
  }
  // If there is the possibility that none of the values (awayVal or homeVal) is set and the user can execute you need to check if they are valid
  if (!value) {
    alert('please enter a value!')
  } else {
    $.ajax({
      url: "https://--------.islandshore.net/dbdata/bet/new/1/" + gameId + "/" + id + "/" + value + "",
      type: "get",
      success: function(response) {
        $('#' + gameId + ' input[name=betAmountHome]').val(''); //This resets the value box
        $('#' + gameId + ' input[name=betAmountAway]').val(''); //This resets the value box
        console.log("https://---------.islandshore.net/dbdata/bet/new/1/" + gameId + "/" + id + "/" + value + "");
      },
      error: function(xhr) {
        console.log('xhr')
      }
    });
  }
});

Answer 1

Data you are sending to url which updates your JSON page with the current number, You can use this data as response to the current page. This response will be reflect to your ajax call, success : function( data ). Use this data to reflect changes into your HTML page. Just see an example

At You url (Server side)

//Receive request data
//Make changes into database
//response with same data

At Ajax

success: function(data) {
   $('#' + gameId + ' input[name=betAmountHome]').val(data.betAmountHome);
    $('#' + gameId + ' input[name=betAmountAway]').val(data.betAmountAway); 
}

Answer 2

/*first ask the server for JSON again to get the updated version*/
$.getJSON(url, function(res){
    /* 
     * Choose only the element in your UI which you would like to update
     * empty it and append the new content to it (this can be done in various 
     * ways of course .
     */
    $("divDisplayingNumber").empty().append(res.whereNumberIs);

});