form表单以json格式向后台传输

最新推荐文章于 2023-12-28 15:34:17 发布

xgysimida

最新推荐文章于 2023-12-28 15:34:17 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/xgysimida/article/details/108119016

版权

最终实现效果如下：

直接上html的程序，相关的js路径都弄好了，直接复制粘贴就可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        html, body, h1, form, fieldset, legend, ol ,li{
            padding:0;
            margin:0;
        }
        ol{
            list-style:none;
        }
        body{
            background:#fff;
            color:#111;
            padding:20px;
        }
        form#payment{
            background:#9cbc2c;
            -webkit-border-radius:5px;
            border-radius:5px;
            padding:20px;
            width:400px;
        }
        form#payment fieldset{
            border:none;
            margin-bottom:10px;
        }
        form#payment fieldset:last-of-type{ margin-bottom:0; }
        form#payment legend{
            color:#384313;
            font-size:16px;
            font-weight:bold;
            padding-bottom:10px;
            text-shadow:0px 1px 1px #c0d576;
        }
        form#payment > fieldset>legend:before{
            content:"Step" counter(fieldset)":";
            counter-increment:fieldsets;
        }
        form#payment fieldset fieldset legend{
            color:#111;
            font-size:13px;
            font-weight:normal;
            padding-bottom:0;
        }
        form#payment ol li{
            background:#b9cf6a;
            background:rgba(255, 255, 255, 0.3);
            border:#e3ebc3;
            border-color:rgba(255, 255, 255, 0.6);
            border-style:solid;
            border-width:2px;
            -webkit-border-radius:5px;
            line-height:30px;
            padding:5px 10px;
            margin-bottom:2px;
        }
        form#payment ol ol li{
            bakcground:none;
            border:none;
            float:left;
        }
        form#payment label{
            float:left;
            font-size:13px;
            width:110px;
        }
        form#payment fieldset fieldset label{
            background:none no-repeat left 50%;
            line-height:20px;
            padding:0 0 0 30px;
            width:auto;
        }
        form#payment fieldset fieldset label:hover{cursor:pointer;}
        form#payment input:not([type=radio]), form#payment textarea{
            background:#fff;
            border:#fc3 solid 1px;
            -webkit-border-radius:3px;
            outline:none;
            padding:5px;
        }
        button
        {
            border:solid 10px #4d4e53;
            border-radius:10px 40px 40px 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <form id="payment">
            <fieldset>
                <legend align="center">用户资料</legend>
                <ol>
                    <li>
                        <label for="name">用户名称：</label>
                        <input type="text" id="name" name="name" placeholder="请输入用户名" required autofocus>
                    </li>
                    <li>
                        <label for="email">邮件地址：</label>
                        <input type="text" name="email" id="email" placeholder="XXXX@163.com" required>
                    </li>
                    <li>
                        <label for="phone">联系电话：</label>
                        <input type="tel" placeholder="010-12345678" id="phone" name="phone">
                    </li>
                </ol>
            </fieldset>
            <fieldset>
                <button type="submit" onclick="oncli()" >提交</button>
            </fieldset>
        </form>
    </div>
</div>

<script type="text/javascript">
        function oncli() {
            var jQuery = $("#payment").serializeJSON();
            var stringify = JSON.stringify(jQuery);
            alert("整体字符串为：\n"+stringify +"\n 姓名："+jQuery.name+"\n 邮件地址："+jQuery.email+"\n 联系电话："+jQuery.phone);

        }
</script>
</body>
</html>