0

我是 ajax 和 jquery 的新手，并试图在我的代码中放置一个 ajax 调用。但以下是我在发出警报时收到的错误消息：

  1. jqxhr.status = 404
  2. 抛出错误 = 未找到
  3. jqxhr.statusText = 未找到
  4. 请求 = 未定义
  5. 错误=未定义

我想要做的： 单击“编辑 gif”，打开一个带有花式文本框（Tinymce）的模式对话框。在文本框中编辑完内容后，单击模态对话框中的“保存”按钮，启动 ajax 调用以将内容保存在数据库中。

发生了什么： 模式对话框正确打开，我可以看到 ajax 调用的“数据”部分已正确填充（放置警报以确认）。我相信网址也是正确的。如果我在浏览器中键入 url，控件会按照 web.xml 转到我的 servlet（打印 Servlet 中的 Sysout）。但不知何故，在单击“保存”按钮后，ajax 调用永远不会通过服务器。如果你们中的一个可以在这里帮助我，那将是非常棒的，将不胜感激。我的 JSP（复制了我认为单独相关的内容）：

<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/sis.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery-ui-1.10.3.custom">
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/tinymce/tinymce.min.js"></script>
    <script>
        $(function() {
            $("#dialog-form2").dialog({
                autoOpen: false, width: 500, modal: true,
                buttons: {
                    "Save": function() {
                        tinymce.get("stChallenge").setContent(tinyMCE.get("edChallenge").getContent());
                        alert($("#ChalId").val());
                        alert(tinyMCE.get("edChallenge").getContent());
                        var xhr =
                                $.ajax({
                            url: "/AjaxServlet?method=updateChal&keyword=dummy",
                            type: "GET",
                            data: {
                                CommentId: $("#ChalId").val(),
                                challenge: tinyMCE.get("edChallenge").getContent()
                            },
                            success: function (result) {
                                alert("Success :" + result);
                                $(this).dialog("close");
                            },
                            error:function (jqxhr, ajaxOptions, thrownError, request, error) {
                                alert('jqxhr.status = ' + jqxhr.status + '\n' + 'thrown error = ' + thrownError + '\n' + 'jqxhr.statusText = '  + jqxhr.statusText + '\n' +
                                    'request = ' + request + '\n' + 'error = ' + error);
                                $(this).dialog("close");
                            }
                        });
                    },
                    Cancel: function() {
                        $(this).dialog("close");
                    }
                },
                close: function() {
                }
            });
            $("#Edit2")
                    .click(function() {
                $("#dialog-form2").dialog("open");
            });
        });
    </script>        
    <script type="text/javascript">
        tinymce.init({
            selector: "#edChallenge", theme: "modern", 
            plugins: [
            ],
            image_advtab: false
        });
    </script>
    <script type="text/javascript">
        tinymce.init({
            selector: "#stChallenge", theme: "modern", readonly: true, toolbar: "false", menubar: "false",
            plugins: [
            ],
            image_advtab: false
        });
    </script>
</head>

<body>
    <c:set var="model" value="${sessionScope.model}" />
    <html:form action="managePerf.do?method=showPerf" method="post"  styleId="ManagePerfForm">
        <html:errors/>
        Date: <html:text property="rankDate" styleId="datepicker" name="ManagePerfForm" />
        <html:submit value="Go" styleClass="input button"/>
        <fieldset>                              
            <table border="0">
                <tr>
                    <td>
                        <div id="dialog-form2" title="Edit Challenges">
                            <form>
                                <textarea cols="75" rows="50" id="edChallenge">${comments}</textarea>
                            </form>
                        </div>
                        <label>Challenges</label>
                        <a href="javascript:void(0);" id="Edit2">
                            <img src='${pageContext.request.contextPath}/img/Edit.gif' height="32" width="32"/>
                        </a>
                        <div id="dTextBox" class="ui-widget">
                            <textarea cols="75" rows="15" id="stChallenge" readonly="true">${comments}</textarea>
                        </div>
                        <input type="hidden" id="ChalId" value=${CommentId} />
                    </td>
                </tr>
            </table>
        </fieldset>
    </html:form>
</body>

4

0 回答 0