LayUI+JavaScript生成动态表单及提交

LayUI动态表单是在Vue+Element-UI动态表单生成及提交之前做的
LayUI效果如下:LayUI+JavaScript生成动态表单及提交_第1张图片
引入需要的文件


<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <script type="text/javascript" src="../../js/jquery-1.9.0.min.js" >script>
    
    <script src="../../layui/layui.js" charset="utf-8">script>
    
    <script src="../../js/url.js">script>
    
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <style>
        .user_left{ width:45%; float: left; margin:20px 0 0 5%; }
    style>
    <title>LayUI+JavaScript生成动态表单及提交title>

发起请求,生成前端代码

这里是重点
这里是重点
这里是重点

    <script>
        $(function() {	//页面加载时执行
            $.ajax({	//获取属性List数据
                type:"get",
                url:getURL("properties"),
                dataType : "json",
                success:function(data) {
                	//遍历List
                	for(var i = 0 ; i  < data.length ; i++){
                        //根据属性List拼接LayUI风格的input代码
                        str =   "
"
//追加到界面,property是后面div的id
var html = document.getElementById("property").innerHTML; document.getElementById("property").innerHTML= html + str; } } }); }) </script> </head>

check()方法校验表单及提交

ajax请求中
data: new FormData($("#addForm")[0])
这句是重点
这句是重点
这句是重点

<body>
<script>
    //表单提交时调用的验证及提交方法
    function check() {
        if ($("#title").val() == '') {
            alert("请填写完整信息");
        } else {
            $.ajax({
                type: "POST",
                url: getURL("insert"),
                data: new FormData($("#addForm")[0]),	//获取表单数据,addForm是表单id
                processData: false,
                contentType: false,
                success: function (data) {
                	alert(data)
                	if (data == 'success') {
                		$("input[type=reset]").trigger("click");	//清空表单
                	}
                }
            })
        }
    }
</script>

表单

<form class="layui-form" name="addForm" id="addForm">
    
    <div class="user_left" id="property">
        
        <div class="layui-form-item">
            <label class="layui-form-label">节目名称label>
            <div class="layui-input-block">
                <input type="text" id="title" name="title" lay-verify="required" class="layui-input">
            div>
        div>
        
        
    div>
    
    
    
    <div class="layui-form-item" style="margin-left: 5%;">
        <div class="layui-input-block">
            
            <input type="button" id="insert" onclick="return check()" class="layui-btn" value="确认添加" />
            
            <input type="reset" name="reset" style="display: none;" />
            
            <input type="button" id="channelList" class="layui-btn" onclick="window.location.href=getURL('pages/property/list.html')" value="查看所有节目"/>
        div>
    div>
form>
body>
html>

代码外:
property请求的List结果如下:

[
    {
        "id": 2, 
        "propertyName": "actors", 
        "propertyShow": "演员", 
        "propertyTips": "演员"
    }, 
    {
        "id": 3, 
        "propertyName": "points", 
        "propertyShow": "评分", 
        "propertyTips": "0-10分"
    }, 
    {
        "id": 9, 
        "propertyName": "desc", 
        "propertyShow": "简介", 
        "propertyTips": "节目简介"
    }, 
    {
        "id": 13, 
        "propertyName": "shuxing", 
        "propertyShow": "属性", 
        "propertyTips": "123"
    }
]

你可能感兴趣的:(#,Layui)