ajax系列 管理系统项目总结(二)——用JSON动态渲染下拉表单及获取下拉表单选中的值

HTML 模块

//一个下拉表单 (用json动态添加表单内容)
<select name="subject" id=""></select>

js模块

- 新建.json文件

//subject.json文件
{
    "subject": [
        { "name": "Java" },
        { "name": "Python" },
        { "name": "PHP" },
        { "name": "GO" },
        { "name": "C++" }
    ]
}

- 用jQuery封装一个Ajax方法(用了promise)

这里跳到promise讲解

function jqAjax(methods, url, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: methods, //方法 GET POST PUT DELETE
            url: url, //路径
            contentType: 'application/json', // 作用: 向后台发送数据的格式必须为json字符串
            data: data, //传给后台的数据 在调用这个函数时要把data转成json形式
            async: 'true', //异步
            success: function(res) { //成功
                console.log(res);
                resolve(res);
            },
            error: function(xhr, status, error) { //失败
                console.log(error);
                console.log(status);
                reject(error);
            }
        })
    })
}

- 用promise , Ajax渲染到页面

async function getSubject() { 
        let subject = await jqAjax("GET", "/assets/data/subject.json")// 调用前面封装的Ajax函数 //第二个参数是上面json文件在文件夹的路径
        console.log(subject.subject);
        const option = subject.subject;
        //渲染到页面
        for (let i = 0; i < subject.subject.length; i++) {
            $("select").prepend('<option>' + option[i].name + '</option>');
        }
    }
    getSubject();

打印出来的subject.subject

- 获取下拉表单选中的值

$("select").find("option:selected").val();

获取值用在Ajax向服务器传数据