form表单提交

最新推荐文章于 2022-05-13 16:48:04 发布

Monkey Wen

最新推荐文章于 2022-05-13 16:48:04 发布

阅读量121

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/nujiwala/article/details/104290424

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

<div id="form-div">
    <form id="form1" οnsubmit="return false" action="##" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" οnclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>

<script type="text/javascript">
    /**
     * 初始化  serializeObject
     */
    function initSerializeObject() {
        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
    }

    function login(){
        // 初始化 序列化对象的方法
        initSerializeObject();
        //获取 from表单的数据
        let jsonData = $("#form1").serializeObject();
        $.ajax({
            type: "post",
            url: "/api",
            contentType: "application/json; charset=utf-8",
            cache: false,
            async: false,
            data: JSON.stringify(jsonData), //转换成json数据
            success: function (resultData) {
                console.log(resultData)
            }
        });

    }

    // function login() {
    //     var arry = $("form1").serializeArray();
    //     console.log(arry);
    //     $.ajax({
    //         type:"POST",
    //         url : "form1",
    //         contentType: "application/json", //必须这样写
    //         dataType:"json",
    //         data: { jsondata: JSON.stringify(arry) },
    //         // data:JSON.stringify({"ids":1}),
    //         success:function(json){
    //             console.log(json);
    //         }
    //     })
    // }
</script>
</body>
</html>