Как сложить два числа после запроса .getJSON, используя Jquery

0

Я использовал функцию .getJSON для получения акций и подсчета для определенного URL-адреса, и я успешно получил акции и счета, но я тоже хочу получить сумму этих двух. Это та скрипка, которую я сделал.

Это JQuery, который я использовал

$(function () {
  var fburl = "http://graph.facebook.com/?id=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html";

  $.getJSON(fburl, function (data) {

     var fbshares = data["shares"];
     $(".facebook").append(fbshares);
  });

  twitterurl = 'http://urls.api.twitter.com/1/urls/count.json?url=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html&callback=?';

  $.getJSON(twitterurl, function (data) {
     var twittershares = data["count"];
     $(".twitter").append(twittershares);
  });

  var sumofboth = fbshares + twittershares;

  $(".sum").append(sumofboth);

});

  • 0
    Вы получаете какую-либо ошибку?
  • 0
    Скорее всего fbshares и twittershares в настоящее время передаются в виде string ... вы пытались с parseInt(fbshares, 10) + parseInt(twittershares, 10) ? И, пожалуйста, добавьте var fbshares = 0, twittershares = 0 в начало вашего кода!
Показать ещё 1 комментарий
Теги:

9 ответов

0
Лучший ответ

Проблема здесь в async=true getJSON Вы должны сделать все внутри первого getJSON. Или используйте ajax без async

http://jsfiddle.net/v8gw6/1/

  • 0
    Этот работает спасибо
  • 1
    Вам не нужно делать все внутри первого обработчика запросов. Это работает, но вы получите ответ быстрее, если одному не придется ждать другого.
Показать ещё 1 комментарий
1

Причина, по которой приведенный выше пример не работает, заключается в том, что вы делаете каждый запрос асинхронно. То есть вы достигаете кода, который суммирует ваши результаты до того, как результаты будут получены.

Если вы поочередно делаете каждый запрос и суммируете результаты после завершения всех запросов, он работает намного лучше.

Проверь это. http://jsfiddle.net/Wm9M3/1037/

$(function () {

    var fburl = "http://graph.facebook.com/?id=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html";

    var twitterurl = 'http://urls.api.twitter.com/1/urls/count.json?url=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html&callback=?';

    // first make your request for the facebook info
    $.getJSON(fburl, function (data) {
        var fbshares = data["shares"];
        $(".facebook").append(fbshares);

        // once the FB info is complete get the twitter info
        $.getJSON(twitterurl, function (data) {
            var twittershares = data["count"];
            $(".twitter").append(twittershares);

            // once we are here both FB and Twitter info has been retrieved
            // lets summarize them
            var sumofboth = fbshares + twittershares;
            $(".sum").append(sumofboth);
        });
    });
});
1

Вы указали fbshares и twittershares внутри $.getJSON и пытается получить доступ к нему вне функций. Таким образом, переменные недоступны.

Объявите их вверху и попытайтесь получить к ней доступ.

Между тем оба являются асинхронными запросами, поэтому они могут разрешаться в два разных раза.

Чтобы преодолеть это, вы можете использовать $.promise, $.when or $.deferred.

Вот пример с $.when

 $(function(){

     var fbshares, twittershares, sumofboth;

     $.when($.getJSON("http://graph.facebook.com/?id=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html", function (data) {
         fbshares = data["shares"] || 0; // assign 0 if it returns undefined
         (".facebook").append(fbshares);
     }), $.getJSON("http://urls.api.twitter.com/1/urls/count.json?url=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html&callback=?", function (data) {
        twittershares = data["count"] || 0;  // assign 0 if it returns undefined
        $(".twitter").append(twittershares);
     }).done(function(){
       sumofboth = fbshares + twittershares;
       $(".sum").append(sumofboth);
    });
});
  • 0
    Этого не достаточно. Поскольку запросы асинхронные, значения еще не были установлены, когда вы пытаетесь их использовать.
  • 0
    Я ... не заметил. Я обновил ответ. Спасибо, что дал мне знать :)
Показать ещё 1 комментарий
1

Поскольку запросы являются асинхронными, вам нужно подождать, пока оба ответа не поступят, прежде чем вы сможете рассчитать сумму. Объявите переменные за пределами обработчиков успеха, чтобы каждый мог проверить, прибыл ли другой, и пусть последний из них будет показывать сумму:

$(function () {
  var fbshares = null;
  var twittershares = null;

  function showSum() {
    var sumofboth = fbshares + twittershares;
    $(".sum").append(sumofboth);
  }

  var fburl = "http://graph.facebook.com/?id=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html";

  $.getJSON(fburl, function (data) {
     fbshares = data["shares"];
     $(".facebook").append(fbshares);
     if (twittershares != null) showSum();
  });

  twitterurl = 'http://urls.api.twitter.com/1/urls/count.json?url=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html&callback=?';

  $.getJSON(twitterurl, function (data) {
     twittershares = data["count"];
     $(".twitter").append(twittershares);
     if (fbshares != null) showSum();
  });

});

Демо: http://jsfiddle.net/6NXYg/

0

$.getJSON внутренне использует jQuery ajax. поэтому убедитесь, что обе переменные имеют значения перед суммированием. Вместо этого используйте jquery ajax с async: false

$(function () {
      var fburl = "http://graph.facebook.co........multi.html",
          twitterurl = 'http://urls.api.twitter.com/.....html&callback=?',
          fbshares=0, 
          twittershares=0; // declare it here to access



        $.ajax({url:fburl,async:false, function (data) {
             fbshares = data["shares"]; // update the var value here
             $(".facebook").append(fbshares);
add(fbShares,twittershares);
          }});
          $.ajax({url:twitterurl,async:false, function (data) {
             twittershares = data["count"];  // update the var value here
             $(".twitter").append(twittershares);
add(fbShares,twittershares);
          }});


        });
function add(a,b)
{
$(".sum").append(a+b);
}
  • 1
    Я бы не рекомендовал использовать синхронные запросы. Браузер полностью зависнет, ожидая ответов.
  • 0
    затем объявите fbShares, twittershares с 0 и вызовите метод add в событии обратного вызова ajax success
0

Вот рабочий код, поместите переменные за пределы вызова ajax и выполните синтаксический анализ Result следующим образом:

   $(function(){
var fburl = "http://graph.facebook.com/?id=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html";
    var fbshares;
    var twittershares;
$.getJSON(fburl, function(data){

     fbshares = parseFloat(data["shares"]);
    $(".facebook").append(fbshares);
});
twitterurl='http://urls.api.twitter.com/1/urls/count.json?url=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html&callback=?';
$.getJSON(twitterurl, function(data){

      twittershares = parseFloat(data["count"]);
 $(".twitter").append(twittershares);
    var sumofboth=fbshares+twittershares;
    $(".sum").append(sumofboth);
});

});

Fiddle DEMO

0

Объем вашей переменной не отображается на стороне, а также после получения запроса. Вы должны использовать эту переменную

    $(function () {
        var fburl = "http://graph.facebook.com/?id=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html";
        var checker = 0;
        var fbshares, twittershares;
        $.getJSON(fburl, function (data) {

            fbshares = data["shares"];
            $(".facebook").append(fbshares);

            checker += 1;
        });
        twitterurl = 'http://urls.api.twitter.com/1/urls/count.json?url=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html&callback=?';
        $.getJSON(twitterurl, function (data) {

            twittershares = data["count"];
            $(".twitter").append(twittershares);


            checker += 1;
        });

        var cache = setInterval(function () {
            if (checker == 2) {
                var sumofboth = fbshares + twittershares;
                $(".sum").append(sumofboth);
                clearInterval(cache);
            }
        }, 100);

});

DEMO

НОВАЯ Демонстрация

  • 0
    Не работает, когда ответ Твиттера приходит первым.
  • 0
    @ Гуффа проверь сейчас.
Показать ещё 1 комментарий
0

У вас есть пара проблем. 1) область переменных 2) пренебрегая асинхронным характером вызовов ajax

Следующий код будет работать для вас

    $(function () {
        //twittershares and fbshares variables made global
        var fburl = "http://graph.facebook.com/?id=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html",
           twitterurl,
           fbshares = -1,
           twittershares,
           sumofboth,
           interval;

        $.getJSON(fburl, function (data) {
           fbshares = data["shares"];
           $(".facebook").append(fbshares);
        });

        twitterurl = 'http://urls.api.twitter.com/1/urls/count.json?url=http://www.bloggerever.com/2014/05/codeanywhere-most-useful-and-multi.html&callback=?';
        $.getJSON(twitterurl, function (data) {
           twittershares = data["count"];
           $(".twitter").append(twittershares);

           //fb ajax request isn't guaranteed to have returned response so check for fb response every 250 milliseconds and update div
           interval = window.setInterval(function () {
              if (fbshares != -1) {
                 sumofboth = parseInt(fbshares, 10) + parseInt(twittershares, 10);
                 $(".sum").append(sumofboth);
                 window.clearInterval(interval);
              }
           }, 250);
        });
     });
  • 1
    Если запрос facebook занимает 2 секунды, а твиттер возвращает результат через 1 секунду, то это не сработает, не так ли?
  • 0
    Ага. Я понял это перед вашим комментарием :) обновленное решение
0

Вы должны определить vars fbshares, twittershares вне ваших функций:

$(function () {
  var fburl = "http://graph.facebook.co........multi.html",
      twitterurl = 'http://urls.api.twitter.com/.....html&callback=?',
      fbshares, 
      twittershares,
      sumofboth; // declare it here to access

  $.getJSON(fburl, function (data) {
     fbshares = data["shares"] || 0; // update the var value here
     $(".facebook").append(fbshares);
  }).promise().done(function(){ // use promise to wait for values to get set
     sumofboth = fbshares + twittershares;
     $(".sum").append(sumofboth);
  });
  $.getJSON(twitterurl, function (data) {
     twittershares = data["count"] || 0;  // update the var value here
     $(".twitter").append(twittershares);
  }).promise().done(function(){ // use promise to wait for values to get set
     sumofboth = fbshares + twittershares;
     $(".sum").append(sumofboth);
  });
});

Поскольку Гуффа предположил, что значения не устанавливаются, так как есть два асинхронных вызова, потребуется время, чтобы установить значения, поэтому вам нужно использовать .promise() чтобы завершить его, и в выполненной функции мы добавим значения и установите их.


Другое решение - использовать его с jQuery.when() следующим образом:

$(function () {
  var fburl = "http://graph.facebook.co........multi.html",
      twitterurl = 'http://urls.api.twitter.com/.....html&callback=?',
      fbshares, 
      twittershares,
      sumofboth; // declare it here to access

  $.when($.getJSON(fburl, function (data) {
     fbshares = data["shares"] || 0; // update the var value here
     $(".facebook").append(fbshares);
  }), $.getJSON(twitterurl, function (data) {
     twittershares = data["count"] || 0;  // update the var value here
     $(".twitter").append(twittershares);
  }).done(function(){
     sumofboth = fbshares + twittershares;
     $(".sum").append(sumofboth);
  });
});

jQuery.when()

Описание:
Предоставляет способ выполнения функций обратного вызова на основе одного или нескольких объектов, обычно отложенных объектов, представляющих асинхронные события.

  • 0
    Этого не достаточно. Поскольку запросы асинхронные, значения еще не были установлены, когда вы пытаетесь их использовать.
  • 0
    @Guffa Хммм .... да, вы правы, я думаю, тогда есть promise().done() должен быть использован.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню