Ajax-案例-学习反馈

Ajax
763 词
案例-学习反馈

学习反馈#

热门校区
地区选择
您的称呼
宝贵建议

案例-学习反馈#

学习反馈-省市区切换#

需求：完成省市区切换效果

步骤：

  1. 设置 省份数据 到下拉菜单
  2. 切换省份，设置 城市数据 到下拉菜单，并清空地区下拉菜单
  3. 切换城市，设置 地区数据 到下拉菜单 
// 1.1省份数据
axios({
    url: 'http://hmajax.itheima.net/api/province'
}).then(res => {
    console.log(res);
    const optionStr = res.data.list.map(pname => {
        return `<option value="${pname}">${pname}</option>`
    }).join('')
    document.querySelector('.province').innerHTML = `<option value="">省份</option>` + optionStr;
    // 1.2切换省份，设置城市，清空地区
    document.querySelector('.province').addEventListener('change', async function(e) {
        // 获取用户选择的省份
        const res = await axios({
            url: 'http://hmajax.itheima.net/api/city',
            params: {
                pname: e.target.value
            }
        })
        console.log(res);
        const cityStr = res.data.list.map(cname => {
            return `<option value="${cname}">${cname}</option>`
        }).join('')
        document.querySelector('.city').innerHTML = `<option value="">城市</option>` + cityStr;

        // 清空地区
        document.querySelector('.area').innerHTML = `<option value="">地区</option>`;
    });
    // 1.3切换地区
    document.querySelector('.city').addEventListener('change', async function(e) {
        const res = await axios({
            url: 'http://hmajax.itheima.net/api/area',
            params: {
                pname: document.querySelector('.province').value,
                cname: e.target.value
            }
        })
        const areaStr = res.data.list.map(areaname => {
            return `<option value="${areaname}">${areaname}</option>`
        }).join('')
        document.querySelector('.area').innerHTML = `<option value="">地区</option>` + areaStr
    })
})

学习反馈-数据提交#

步骤：

  1. 监听提交按钮的点击事件
  2. 依靠插件收集表单数据
  3. 基于axios提交保存，显示结果
// 2.1监听按钮点击事件
document.querySelector('.submit').addEventListener('click', async function() {
    // 2.2收集表单数据
    const form = document.querySelector('.info-form')
    const data = serialize(form, { hash: true, empty: true })
    console.log(data);
    // 2.3提交保存
    try {
        const res = await axios({
            url: 'http://hmajax.itheima.net/api/feedback',
            method: 'post',
            data
        })
        console.log(res);
        alert(res.data.message)
    } catch (err) {
        console.dir(err);
        alert(err.response.data.message)
    }
})