Question

我有一个包含姓名，电子邮件，消息和验证码字段的表单。

我可以提交表单并可以在服务器端验证验证码。如果一切正常，我必须使用requestDispatcher显示一个jsp。如果验证码是正确的，一切正常，但如果它不正确，我将用户重定向到显示表单的同一页面，以便用户可以重新输入验证码。但这种方法的主要问题是表格get已被清除，这意味着用户必须再次重新填充整个内容。我怎样才能避免这种情况，以便用户不需要重新填写表格。

他们还有其他更好的方法。

我已经尝试过调用验证验证码的ajax调用，但是这个方法遇到了一些问题。 Unable to submit form in jquery ajax callback function

Answer 1

您必须在JS代码中使用XmlHTTPRequest。

您可以指定回调以获取答案并根据需要进行处理。在我的情况下，我从服务器获取要输出的代码，具有所有输入的表单保持在先前的条件中，并且在html页面上唯一的div'输出'被修改。

以下是我的计划的一个简短示例：页面的HTML

<script type="text/javascript" src="./js/script.js">/script>
<form name="someForm">
<p><b>Enter your text here:</b></p>`

<p><textarea rows="10" cols="45" name="code"></textarea></p>
<input type="button" value="Send it" onclick="sendIt()"/>
</form> </code>
<div id="output"></div>

在我的情况下，script.js只更新页面的一部分

function sendIt() {
    var theCode = document.codeHolderForm.code.value;
    var linkToDiv = document.getElementById("output");
    linkToDiv.innerHTML = 'p> Server response below: p>';

    var request = getXmlHttp();

    request.open("POST", "/", true);
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    request.onreadystatechange = function () {
        if (request.readyState != 4) return;

        if (request.status == 200) {
            linkToDiv.innerHTML += 'p>' + request.responseText + '/p>';
        } else {
            handleError(request.statusText);
        }
    };

    request.send("code=" + theCode);

}

function handleError(message) {
    alert("Error: "+message)
}

function getXmlHttp() {
    var xmlhttp;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

Answer 2

你可以这样做，在某个div上调用click事件说'submit'，然后调用ajax调用并获得结果。根据结果，您可以决定是否提交表格。

提交是DIV printCoupon是表格

$("#submit").click(function(){

        var response = '';
        $.ajax({ type: "GET",   
                 url: "ajaxprintcoupon",   
                 async: false,
                 success : function(text)
                 {
                     response = text;
                 }
        });

        alert(response);

        if(response == 'Testing'){
            $('#printCoupon').submit();
        }else{
            // no change
        }
    });

表单提交后显示消息的方法

2 个答案: