表单提交确定Ajax响应

时间:2013-04-08 20:44:10

标签: javascript ajax forms

用户填写表单并单击“提交”按钮。数据被发送回服务器,并根据服务器服务器的响应提交或不提交表单(页面被重定向或不重定向)。问题是表单总是提交,页面在收到服务器响应之前重定向。

        function SubmitForm(name, data1)
        {
            var result;
            var checkResult = function(result)
            {
                alert("final value is: "+result)
                return result
            }
            var xmlhttp
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    if(xmlhttp.responseText)
                    {
                        result = true
                    }
                    else
                    {
                        document.getElementById("report").innerHTML = "blah blah blah"
                        result = false
                    }
                    checkResult(result)
                }
            }
            xmlhttp.open("POST", "Checkdata1.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            xmlhttp.send("name="+encodeURIComponent(name.value)+"&data1="+encodeURIComponent(data1.value))
            //return false
        }

以下是调用上述JavaScript函数的表单的HTML。

<form onsubmit="return isPasswordCorrect(document.getElementById('name'), document.getElementById('txtField1'))" action="nextpage.php" method="GET">

我知道这个想法是让函数返回false以防止提交表单,但是如何让它等待足够长的时间让服务器通过Ajax回复?顺便说一下,我不需要JQuery,如果没有必要,我现在不想开始使用它。

1 个答案:

答案 0 :(得分:1)

我会使用不提交表单的<button>(类型不是"submit"):

<form ...>
...
<button onclick="SubmitForm(...)">Submit</button>
</form>

然后在SubmitForm的末尾,您可以输入:

document.querySelector("form").submit();

如果您想提交表单。