js封装，实现调用接口生成HTML表单页面

最新推荐文章于 2024-09-06 17:19:50 发布

克雷莫纳的月光

最新推荐文章于 2024-09-06 17:19:50 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： HTML JavaScript 封装前端 ajax

本文链接：https://blog.youkuaiyun.com/denghaolinzy/article/details/88735559

本文介绍如何利用JavaScript进行接口调用，并将返回数据动态生成为HTML表单页面，适用于前端开发中快速构建数据展示场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 一键生成“搜索”
 * @param json
 */
function buildSearch(json,extra = null) {
    var content = `<form action="" class="layui-form search-form" style="float:left;">`;
    $.each(json, function (index, item) {
        content += `<div class="layui-inline">`;
        //第一条数据得加上label, 作为开始的标签
        if (index == 0 && item.label) {
            content += `<span class="data-screening-title">` + item.label + `&nbsp;&nbsp;&nbsp;&nbsp;</span>`;
        }
        //下拉框
        if (item.type == 'select') {
            content += `<div class="layui-input-inline"><select name="` + item.name + `" lay-filter="" class="layui-input layui-input-inline">`;
            $.each(item.data, function (key, value) {
                if (item.selected == key) {
                    content += `<option value="` + key + `" selected="selected">` + value + `</option>`;
                } else {
                    content += `<option value="` + key + `">` + value + `</option>`;
                }
            });
            content += `</select></div>`;
        } //text 框
        else if (item.type == "text") {
            //开始日期前加上label:
            if (item.id == "start-date") {
                content += `<span class="data-screening-title">开始日期：</span>`;
            }
            //结束日期前加上 -
            if (item.id == "end-date") {
                content