我通过结合本课程过去的演讲中的一些概念,为自己正在接受的Javascript课程提出了自己的挑战。我希望能够从一个下拉框中选择一个数据,并在文本框中填充数据库中的相关数据。我正在使用ajax提取数据。这是我到目前为止的页面:
数据位于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的所有提示/答案。我曾尝试过在线搜索解决方案,但是我对术语的了解并不深,不知道要专门搜索什么。