Обновить данные с помощью Javascript ajax async не удалось

Я использую код HTML, JavaScript и узлы для разработки расширения Chrome. При загрузке страницы я вызываю функцию getBalance(), чтобы получить данные и привязать их к диапазону HTML. Ниже приведен мой код:

function getBalance() {
    var request = new XMLHttpRequest();
    request.open('GET', 'http://xxx.xxx.xx.xxx:xxxx/getAccount?address=xxxxxxxxxxxxxxxxxxxx', true);
    request.onload = function () {
      var data = JSON.parse(this.response);
      if (request.status >= 200 && request.status < 400) {
        var bal = data.Balance;
        var etherprice = bal / 1000000000000000000;
        document.getElementById("accbal").innerHTML = etherprice;
      } else {
        console.info('error');
      }
    }
    request.send(null);
}

window.addEventListener('load', function load(event){
    getBalance();
});

function sendTransactionBroadcast(result){ 
    var doAjax = function() { 
    $.ajax({ 
    type : "POST", 
    url : "http://xxx.xxx.xx.xxx:xxxx/broadcast",   
    data: JSON.stringify(result), 
    contentType: 'text/plain; charset=UTF-8', 
    success:function(json){ 
      console.info(json);
      getBalance();
    }, 
    error: function() { 
    alert("Error"); 
    } 
    }); 
    } 
    doAjax(); 
    }

sendTransactionBroadcast() функция вызывается по нажатию кнопки, эта функция имеет ajax асинхронный POST-вызов. После завершения выполнения, в случае успеха, я хочу обновить данные из функции getBalance() и привязать их к диапазону. Итак, я снова называю это успехом ajax. Проблема в том, что если я устанавливаю отладчик и отлаживаю код построчно, я получаю обновленные данные в span innerHTML. Все идет хорошо. Но если я закрою отладчик и нажму кнопку, span innerHTML не изменится в пользовательском интерфейсе. Я не понимаю, почему? Также иногда менялось иногда нет. Это проблема с асинхронным ответом ajax или что-то еще? Как это решить?

manifest.json

{
  "manifest_version": 2,

  "name": "C Wallet",
  "description": "The C Wallet in your browser",
  "version": "1.0",

  "browser_action": {
   "default_icon": "Image/CI_logo-01.png",
   "default_popup": "popup.html"
  },
  "icons": { "16": "Image/CI_logo-01.png",
    "48": "Image/CI_logo-01.png",
   "128": "Image/CI_logo-01.png" 
  },
  "permissions": [
   "activeTab"
   ]
}

На первый взгляд кажется, что ваша функция getBalance кэширует некоторые значения: попробуйте request.open('GET', 'http://xxx.xxx.xx.xxx:xxxx/getAccount?address=xxxxxxxxxxxxx‌​xxxxxxx&someRandomVa‌​lue=' + Date.now() , true); Это должно заставить браузер извлекать данные с сервера, а не из кеша браузера.

r3dst0rm 27.05.2019 09:21

Я попробовал это, теперь я узнаю, что при первом нажатии кнопки он работает нормально. При втором нажатии не обновляется.

Varsh 27.05.2019 09:30

Ваш код, кажется, работает так, как ожидалось! Я попробовал это с поддельным API, он работает нормально. Он также обновляет цену при последующих кликах.

Saroj 27.05.2019 10:12

@Saroj, ты использовал его в расширении Chrome?

Varsh 27.05.2019 10:14

Неа. Просто попробуйте это с помощью простого html и js.

Saroj 27.05.2019 10:16

Хорошо, но на простом HTML и js это будет работать.

Varsh 27.05.2019 10:18

Расширения имеют разные части с разными разрешениями, ограничениями и возможностями. Вам нужно предоставить больше информации, например, manifest.json, и описать, где именно выполняется опубликованный фрагмент кода.

wOxxOm 27.05.2019 12:06

@wOxxOm, пожалуйста, проверьте манифест.

Varsh 28.05.2019 04:38
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
82
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ну, я нашел проблему. Поскольку я использовал HTMLbutton type = "submit", это было причиной того, что страница загружалась, а данные не менялись в соответствии с тем, что я устанавливал. Это было сброшено. Чтобы избежать загрузки страницы, я использовал button type = "button", и все проблемы были решены.

Другие вопросы по теме