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

【问题标题】：approach for displaying message after form submit表单提交后显示消息的方法
【发布时间】：2012-07-27 03:11:24
【问题描述】：

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

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

他们还有其他更好的方法吗？

我已经尝试进行 ajax 调用来验证验证码，但这种方法存在一些问题。 Unable to submit form in jquery ajax callback function

【问题讨论】：

你能把JQuery ajax提交代码发给你吗？
我在我的问题中给出了一个链接......你可以在那里找到代码。

标签： java javascript html jakarta-ee

【解决方案1】：

您可以这样做，在某些 div 上调用 click 事件说“提交”，然后调用 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】：

你必须在 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;
}

【讨论】：