Question

当用户输入数字并点击提交时，会将其发送到使用当前号码更新我的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电话中，成功：功能（数据）。使用此数据将更改反映到HTML页面中。只看一个例子

At You url（服务器端）

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

在Ajax

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

Answer 2

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/mydb";
var twitter = require('./twitter');

exports.pushdata = function(value){
  MongoClient.connect(url, function(err, db) {
    if (err) throw err;
    var myobj = {id: value};
    db.collection("tweets").insertOne(myobj, function(err, res) {
      if (err) throw err;
      db.close();
    });
  });
}
exports.pullData = function(res){
  MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  db.collection("tweets").find({}).toArray(function(err, result) {
    result.forEach(function(entry) {
    twitter.loadTwit(res,entry);
});
    db.close();

  });
});
}

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

2 个答案: