首页 > 代码库 > 表单 - 数据提交

表单 - 数据提交

2024-08-29 15:33:46   213人阅读

<script type="text/javascript">
    $(function () {
        $("#loginInputForm").form({
            url:"<%=homePage%>/t00_userController.json?login",
            success:function(data){
                data = eval("("+data+")");
                console.log(data.st);
                if ("-1" == data.st){
                    $.messager.alert(‘警告‘,"登陆失败");
                }else{
                    $.messager.alert(‘提示‘,"登陆成功");
                }
            }
        })
        $("#loginAndRegDialog").dialog({
            title: ‘登陆‘,
            width: 200,
            height: 200,
            closable: false,
            modal: true,
            buttons: [
                {
                    text: ‘登陆‘,
                    handler: function () {
                        console.log("登陆");
                        $("#loginInputForm").submit();
                    }
                }, {
                    text: "注册",
                    handler: function () {
                        console.log("注册");
                    }
                }

            ]
        })
    })

</script>

 ajax提交表单数据

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
    String homePage = request.getContextPath();
%>
<!DOCTYPE HTML>
<html>
<head>
    <title>首页</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="<%=homePage%>/jslib/jquery-easyui-1.5/themes/default/easyui.css"
          charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="<%=homePage%>/jslib/jquery-easyui-1.5/themes/icon.css"
          charset="utf-8"/>
    <script type="text/javascript" src="<%=homePage%>/jslib/jquery-easyui-1.5/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=homePage%>/jslib/jquery-easyui-1.5/jquery.easyui.min.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="<%=homePage%>/jslib/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"
            charset="utf-8"></script>

</head>
<body class="easyui-layout">
<div data-options="region:‘west‘,title:‘左边栏‘,split:true" style="width:100px;"></div>
<div data-options="region:‘center‘,title:‘中心内容‘" style="padding:5px;background:#eee;"></div>


<div id="loginAndRegDialog">
    <form id="loginInputForm" method="post">
        <table align="center">
            <tr>
                <td align="right">用户名</td>
                <td>
                    <input type="text" name="username"/>
                </td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td>
                    <input type="password" name="password"/>
                </td>
            </tr>
        </table>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $("#loginAndRegDialog").dialog({
            title: ‘登陆‘,
            width: 200,
            height: 200,
            closable: false,
            modal: true,
            buttons: [
                {
                    text: ‘登陆‘,
                    handler: function () {
                        console.log("登陆");
                        var dateJson = {
                            username: $("input[name=‘username‘]").val(),
                            password: $("input[name=‘password‘]").val()
                        };
                        console.log($("#loginInputForm").serialize());
                        console.log($("#loginInputForm").serializeArray());
                        console.log(JSON.stringify(dateJson));//可以
                        var data = {};
                        $("#loginInputForm").serializeArray().map(function(x){
                            if (data[x.name] !== undefined) {
                                if (!data[x.name].push) {
                                    data[x.name] = [data[x.name]];
                                }
                                data[x.name].push(x.value || ‘‘);
                            } else {
                                data[x.name] = x.value || ‘‘;
                            }
                        });
                        console.log(JSON.stringify(data));//可以
                        $.ajax({
                            type: "POST",
                            url: "<%=homePage%>/t00_userController.json?login",
                            data: JSON.stringify(data),
                            cache: false,
                            dataType: "json",
                            contentType: ‘application/json;charset=utf-8‘,
                            success: function (data) {
                                if ("-1" == data.st) {
                                    $.messager.alert(‘警告‘, "登陆失败");
                                } else {
                                    $.messager.show({
                                        title: ‘提示‘,
                                        msg: ‘登陆成功‘,
                                        timeout: 5000,
                                        showType: ‘slide‘
                                    });
                                    $("#loginAndRegDialog").dialog("close");
                                    <%--$("body").append("<a id=‘id1‘ href=http://www.mamicode.com/‘/goPage.html?pagePath=work‘>");--%>
//                                        $("#sp1").click();
                                }
                            }

                        })
                    }
                }, {
                    text: "注册",
                    handler: function () {
                        console.log("注册");
                    }
                }

            ]
        })
    })

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

 

表单 - 数据提交


联系
我们