当前位置: 首页 > 工具软件 > Ajax Submit > 使用案例 >

通过submit提交的表单怎么实现ajax提交

谭健柏
2023-12-01

通过ajax实现对submit表单的提交

  我们知道,ajax提交是不能使用submit的,如果用submit会直接跳过ajax提交。如果你一定要用submit来提交表单,并且又要使用ajax实现表单的提交,就将submit的返回值设置为false。
  submit提交表单,如果返回为true,表单直接提交;返回为false,表单就不提交(这时候就可以交给ajax来实现表单提交了)
  submit提交,又要使用ajax提交表单,需要在submit提交的时候返回false,将其拦截下来,使其不提交,然后交给ajax提交就行。

案例

表单通过submit方式提交

<form id="loginForm" action="" method="post" accept-charset="utf-8">
...
	<input type="submit" value="登录" id="loginBtn">
</form>

要实现ajax完成提交只需要将其返回值设置为false

	$("#loginForm").submit(function () {
		//写false,表示拦截
		return false;
	})

完整实现

        $("#loginBtn").click(function () {
            //要求两个值正确,我们才做提交
            if (checkUserName() && checkPassword()) {
                var un = $("#username").val()
                var pw = $("#password").val()
                //alert(un+pw)
                //写提交
                $.ajax({
                    url: "loginServlet",
                    async: true,
                    data: "username=" + un + "&password=" + pw,
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        alert(data)
                    },
                    error: function () {
                        alert("服务器发生了错误")
                    }
                });
            }
        })
 类似资料: