如何将axios请求返回的响应数据赋值到HTML的input文本框中

实现方法 #

你不需要创建文本节点，input 元素的内容直接通过value属性赋值即可，修改你的axios回调代码如下：

let cp = document.querySelector('input[name=codigopostal]');
let codigo = cp.value;
cp.value='';

axios.get(`https://api.duminio.com/ptcp/ptapi615ae094f3e579.37295368/${codigo}`)
    .then(function(response){
        if(response.data.Distrito !== null){
            console.log(response.data);
            // 直接获取对应input元素，给value赋值
            document.getElementById('Distrito').value = response.data.Distrito;
            document.getElementById('concelho').value = response.data.Concelho;
            document.getElementById('cidade').value = response.data.Freguesia;
            // 剩余原有逻辑可继续在此处编写
        }
    })
    // 建议补充异常捕获逻辑，避免请求失败无响应提示
    .catch(function(error){
        console.error('请求出错：', error);
    })

核心逻辑说明 #

• input 属于表单元素，赋值和取值都操作它的value属性即可，不需要创建文本节点插入DOM
• 你原来使用的document.createTextNode是用来给普通块级/行级元素（比如div、span）插入文本内容的，不适用于表单输入框

内容的提问来源于stack exchange，提问作者user16973763