在 Ajax 表单提交中捕获服务器端错误答案

【问题标题】：Catching server side errors inside Ajax form submission在 Ajax 表单提交中捕获服务器端错误
【发布时间】：2009-07-13 19:27:37
【问题描述】：

我正在使用 Java 应用程序，并且我从模式窗口提交了 ajax 表单。我希望代码根据服务器端处理结果在模式中加载成功或错误页面。以下代码仅适用于成功场景。

            $.ajax({
                type: "POST",
                url: action,
                data: params,
                success: function() {
                    $("#p_content").load("/test.jsp?id=12345");
                }
            });

我对 ajax 还很陌生，但据我了解，在上面的脚本中添加“error:”部分是不够的，它不会检测到我的 servlet 代码中的错误。有什么方法可以从这个函数内部读取请求参数？或者也许我可以使用别的东西？请帮忙！

谢谢，娜塔莎

【问题讨论】：

既然你不想修改现有的java代码，你还需要告诉我们那个java代码在出错时做了什么。例如，当它遇到错误时，它可能会返回一个 HTTP 500 错误代码。或者，它可能会返回一个成功的 HTTP 响应，其中包含一个 HTML 页面，其中包含某些指示错误的文本。除非我们知道它如何处理错误，否则我们无法告诉您如何检测和响应错误。 HTTP 本身没有所谓的“错误消息参数”，所以它必须是在基本标准之上添加的东西。

标签： java jquery ajax

【解决方案1】：

这是一个用 php 完成的例子。希望有用。

<html><!-- This is index.php -->
    <head>
        <script src="js/jquery.js" type="text/javascript"></script><!-- link to jQuery -->
        <script language="javascript"> 
        $(document).ready(function () {
            $('input#send').click(function(){
                /* Empty div#error and div#result incase they contain info from the last submission */
                $('#error').empty('');
                $('#result').empty('');
                /* Client-side validation */
                var name = $("input#name").val();
                var age = $("input#age").val();
                if (name==''){
                    alert('Insert your name.');
                }
                else if (age==''){
                    alert('Insert your age.');
                } else { 
                    var params = 'name=' + name + '&age=' + age;   
                    $.ajax({        
                         url:'b.php',        
                         type:'post',                 
                         dataType:'html',            
                         data:params,
                         cache: false,            
                         success:data     
                         }); 
                    function data (html) {
                        var $html = $( html ); // create DOM elements in a jQuery object
                        /* Return errors from 'b.php' */
                        $html.filter('#err').appendTo("#error");
                        /* Return valid Post */
                        $html.filter('#res').appendTo("#result");
                        /* Clear name input */
                        $('input#name').val('');
                        /* Clear age input */
                        $('input#age').val('');
                    }
                }
            }); 
        }); 
        </script>
        <style type='text/css'>
            #error{
                color:maroon;
                font-weight:bold;
            }
            #result{
                color:green;
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div id="error"></div><!-- View Errors -->
        <div id="result"></div><!-- View valid Post -->
        <input type='text' name='name' id="name" value='' /><br/ >
        <input type='text' name='age' id="age" value='' /><br/ >
        <input type='submit' name='send' id="send" value='Send' />
    </body>
</html>

<?php /* This is b.php */
if(($_POST['name']=='')||($_POST['age']=='')){
    $error = '<div id="err">Error: Fill in ALL fields.</div>';
} elseif(is_numeric($_POST['name'])){
    $error = '<div id="err">Error: Name should NOT contain numbers.</div>';
} elseif(!is_numeric($_POST['age'])){
    $error = '<div id="err">Error: Age should ONLY contain numbers.</div>';
} else{
    $result = '<div id="res">Hi '.$_POST['name'].', you are '.$_POST['age'].' years old.</div>';
}
echo $error;
echo $result;
?>

【讨论】：

【解决方案2】：

当发生意外情况（通常为 500）时，您的 servlet 应返回适当的 HTTP status code。当服务器响应有问题的状态码时，jQuery 将调用您的error 回调函数。

【讨论】：

我不想修改其他地方使用的现有 java 代码。 servlet 设置错误消息参数并重定向回错误页面，或重定向到成功。我希望检索错误消息参数并根据该值确定要加载的 html。
好吧，您将不得不对其进行修改以使其与 AJAX 一起使用。底线。现在，如果您不想弄乱任何已经在使用它的东西，让您的 ajax 向它发送一个特殊参数（表明它是一个 AJAX 请求），然后更改 servlet 以查找这个新参数并做出相应的反应。如果新参数不存在，让 servlet 继续执行它现在正在执行的操作。 AJAX 不仅仅是客户端代码，您必须在两端工作才能让事情顺利进行。

【解决方案3】：

如果即使服务器端发生错误也无法避免发送明显的 HTTP 成功代码（1xx、2xx 或 3xx），那么 jQuery 将始终调用您的 success 函数。您需要检查在客户端 (JS) 代码中发回的数据，以确定您在浏览器中如何处理返回的信息。

【讨论】：