ajax提交form表单实例详解

TheDisguiser 2020-07-25 10:38:00 java常见问答 4208

ajax这个技术如今是无人不知了,在web前端里及常见java项目里几乎都会用到它。那怎么使用ajax提交form表单小伙伴们知道吗?下面就通过一个实例来了解下吧。

例:

<body>
        <h1 align="center">用户登录</h1>
        <div align="center" style="font-size: 20px;">
            <form id="loginForm" name="loginForm" action="${pageContext.request.contextPath}/user/login" method="post">
              <table  align="center">
                      <tr>
                        <td>用户名:</td>
                        <td colspan="2"><input type="text" name="username" id="username" /></td>
                      </tr>
                      <tr>
                        <td>密  码:</td>
                        <td colspan="2"><input type="password" name="password" id="password" /></td>
                      </tr>
                        <td colspan="3" align="center">
                            <input id="login_submit_button" type="button" value="登录"  onclick=<span style="color:#ff00;">"loginSubmit</span>(this.form);" />
                        </td>
                      </tr>
                </table>
            </form>
        </div>
        <div align="center" style="padding:30px;font-size: 15px;">
            <span style="color: red;">注意:</span>
            <span  style="color: blue;">
                只有登录用户才可以上传图片。
            </span>
        </div>
 </body>
<head>
        <title>用户登录</title>
        <script src="${pageContext.request.contextPath}/js/jquery-1.4.min.js" type="text/javascript"></script>
    </head> <
script type = "text/javascript" >
    function loginSubmit(form)
    {
        $.ajax(
        {
            type: "POST"
            , url: "${pageContext.request.contextPath}/user/login"
            , data: $("#loginForm") < span style = "color:#ff00;" > .serialize < /span>(),
            success: function (msg)
            {
                if ((msg == "true"))
                {
                    alert("登录成功。");
                    window.location.href = "${pageContext.request.contextPath}/add_user";
                }
                else
                {
                    if (msg == "false")
                    {
                        alert("登录失败。");
                    }
                }
            }
        });
    }
</script>

以上就是本篇文章的所有内容,关于ajax提交form表单你了解了吗?更多java程序代码例子请记得关注本网站了解具体。

推荐阅读:

ajax跨域请求如何解决?什么是跨域?

jquery ajax的异步如何转换成同步?

ajax datatype参数会遇到什么问题?