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

Question

当用户输入数字并单击提交时，它将发送到一个URL，该URL用当前数字更新我的JSON页面。 我希望能够显示当前号码，而无需刷新页面。 有没有一种简单的方法可以使用ajax调用来做到这一点？ 它下面显示了获取游戏的代码和所需的数据，但是我希望能够在用户提交时提取相同的数据，以便对其进行更新。

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

您要发送到url的数据会用当前编号更新JSON页面，您可以使用此数据作为对当前页面的响应。 此响应将反映给您的ajax调用成功：function（ data ）。 使用此数据将更改反映到HTML页面中。 看一个例子

在您的网址（服务器端）

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

在阿贾克斯

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

});