Question

我是jquery的新手，想要了解如何在点击提交按钮后显示消息（e.x请等待绿色或提交）。

你能帮忙吗

Answer 1

单击submit按钮后，通常会将表单提交给服务器并停止所有客户端脚本执行。因此，除非您对表单进行AJAX化，否则它将无效。为了AJAX化您的表单，您可以附加到submit事件并替换默认操作：

$(function() {
    $('#theForm').submit(function() {
        // show a hidden div to indicate progression
        $('#someHiddenDiv').show();

        // kick off AJAX
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function() {
                // AJAX request finished, handle the results and hide progress
                $('#someHiddenDiv').hide();
            }
        });
        return false;
    });
});

和你的标记：

<form id="theForm" action="/foo" method="post">
    <input name="foo" type="text" />
    <input type="submit" value="Go" />
</form>

<div id="someHiddenDiv" style="display: none;">Working...</div>

Answer 2

可能会有所帮助：

$('#submitButtonID').click(function(){
 alert('Please wait while form is submitting');
 $('#formID').submit();
});

Answer 3

不需要对表单进行Ajax化。您可以在提交期间显示隐藏的div元素。只要服务器端没有发回任何响应，webbrowser就会继续显示初始页面。

您可以使用CSS display: none来隐藏元素。您可以使用jQuery.show()来显示与选择器匹配的元素。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3377468</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#form').submit(function() {
                    $('#progress').show();
                });
            });
        </script>
        <style>
            #progress { 
                display: none;
                color: green; 
            }
        </style>            
    </head>
    <body>
        <form id="form" action="servlet-url" method="post">
            ...
            <input type="submit">
        </form>
        <div id="progress">Please wait...</div>
    </body>
</html>

所以，只要你not using scriptlets in JSP运行繁重的业务，而不是一个servlet类，它反过来在处理结束时显示JSP，它将按预期工作。

单击“提交”按钮后如何显示jquery消息

3 个答案: