将AJAX数据与其他AJAX数据相关联

时间:2020-05-08 19:43:24

标签: javascript

我通过结合本课程过去的演讲中的一些概念,为自己正在接受的Javascript课程提出了自己的挑战。我希望能够从一个下拉框中选择一个数据,并在文本框中填充数据库中的相关数据。我正在使用ajax提取数据。这是我到目前为止的页面:

page view

数据位于sql数据库中,并已通过PHP转储到“ ajax服务器”。我将其包含在页面中以供参考。如您所知,我想出了如何用ajax数据填充下拉列表。这是我到目前为止的代码:

const dataModule = (function(){

//some code

})();

const uiModule = (function(){

  const domStrings = {
    dropdown: '.dd',
  }

//get data from ajax
  const dropdown = document.querySelector('.dd');
  const getData = (async function() {
    const data = await (await fetch('http://localhost/Test2/ajaxservers/_family.php')).json();
    data.forEach(cur => {
      option = document.createElement('option');
      option.text = cur.fname;
      dropdown.add(option);
    });
  })();

  return {
    returnDomStrings: function() {
      return domStrings;
    }
  }

})();

const controlModule = (function(data, ui){

  const doms = ui.returnDomStrings();
  const setupEL = function() {
    document.querySelector(doms.dropdown).addEventListener('change',select)
  }

  const select =  function() {
    let x = document.querySelector(doms.dropdown);
    console.log(x.value);
  }

  return {
     init: function() {
      console.log('Application started');
      setupEL();
    }
  }

})(dataModule, uiModule);

controlModule.init()

我不太确定下一部分。我什至从哪里开始?请记住,我只是在学习,而我还没有准备好使用Jquery。保留有关Vanilla JS的所有提示/答案。我曾尝试过在线搜索解决方案,但是我对术语的了解并不深,不知道要专门搜索什么。

0 个答案:

没有答案