[英]What would be a good way to get newly submitted JSON data via ajax?
當用戶輸入數字並單擊提交時,它將發送到一個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')
}
});
}
});
您要發送到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);
}
/*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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.