如何创建可重用的AJAX调用函数并从返回的对象中提取不同的值

时间:2018-08-08 23:13:05

标签: javascript node.js ajax asynchronous

我有一个Nodejs应用程序,可以在html页面上显示随机生成的数据。有一个页面加载对象,每个字段有8个字段。

我想允许用户单击按钮仅更改单个字段,以仅在该字段中生成新的随机结果。

我正在使用AJAX调用函数,但是无法在不重写8次几乎完全相同的代码的情况下使该函数可重用于每个字段。

我意识到最终功能也将需要一些错误处理。

function ajaxCall() {
  var http = new XMLHttpRequest();
  var data;

  http.open("GET", "/randomStuff", true);
  http.onload = function() {

 // response is an object of 8 different properties
  data = JSON.parse(http.response);

 // this .log yields the object to the console without any errors
 // so I know it works and the correct data is there
  console.log(data);

 // This works of course but I want to simply call the function for each....
 // ... section and put a single value in each.
 // Without having to rewrite the entire ajaxCall function each time.
 insertP(data.propOne, 'sectionOneID')

 }
 http.send();
};

// This is the function that puts the data on the page.
function insertP(str, id) {
  var p = document.getElementById(id);
  p.textContent = str;
};

使用insertP或另一个作为回调似乎是解决方案,但我不确定将其放置在何处。在那种情况下,我可以简单地在html中调用所需的对象属性。

0 个答案:

没有答案