load() - 不加载答案

【问题标题】：load() - doesn't loadload() - 不加载
【发布时间】：2014-04-30 20:27:42
【问题描述】：

这是问题的解决方案。感谢所有人，特别感谢 Alessandro G. 的私人帮助。

我在 jsp URL 上进行了 load()，以考虑通过排列加载详细说明。正确的方法是对 SERVLET URL 执行 load()，从表单传递参数化数据。 load() 对 java servlet 执行 GET 操作，java servlet 详细说明排列，他的响应包含用作模板的 jsp 以打印带有排列的 HTML 代码

$(document).ready(function(){
    $("form").submit(function(event){
        console.log("submit effettuato");

        event.preventDefault();

        var formData = $(this).serialize();
        console.log(formData);

        $("#aggiornare").load( "anagrammiajax", formData , function(responseTxt, statusTxt, xhr){
            if(statusTxt=="success"){
                alert("contenuto esterno cariato correttamente");
            }
            if(statusTxt=="error"){
                alert("error: " + xhr.status + ": " + xhr.statusText);
            }
        });
    });
});

我正在研究 Web 应用程序，我正在尝试创建一个应用程序来显示字符串的排列。

我使用了一个名为“index.html”的 html 页面，其中包含一个将单词发送到 servlet 的表单
servelt 被称为“anagrammiajax”，它可以正常工作
servlet 详细说明排列并将它们发送到名为“anagrammipartial.jsp”的 jsp 页面
jsp 页面只使用一个 foreach 来打印所有排列
我想在 index.html 页面中使用 ajax load() 方法将 jsp 页面的内容显示到 div 中

问题：

我不想在 servlet 详细说明后重定向到 jsp 页面，但我不会再次显示更新后的 div 的 idex.html（可能会从 jsp 重定向到 index.html 并添加一个 setInterval 方法来自动刷新带有计时器的页面并加载内容？）
jquery load() 方法不会从 jsp 页面加载 div 中的内容（forEach 打印的排列），它返回一个 0 错误

请帮我解决一下

这是我的代码：

index.html

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Anagrammi su JSP usando JSTL, jQuery, AJAX</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="update.js"></script>   
  </head>

  <body>
    <h1>Anagrammi su JSP usando JSTL, jQuery e AJAX</h1>
    <p>visualizza gli anagrammi (permutazioni) della parola inserita</p>
    <div>
        <form action="anagrammiajax" name="anagrammi" method="post">
            <input type="text" name="parola">
            <input id="submit" type="submit" value="genera anagrammi">
        </form>
    </div>
    <div>
        <h2>Risultati</h2>
        <h3>pagina aggiornata con AJAX e jQuery</h3>
        <div id="aggiornare">
        </div>
    </div>
  </body>
</html>

update.js 代码：

$(document).ready(function(){   
    $("#submit").click(function(){
    alert("click");
        $("#aggiornare").load("anagrammi-partial.jsp", function(responseTxt, statusTxt, xhr){
           if(statusTxt=="success"){
            alert("contenuto esterno cariato correttamente");
            }
            if(statusTxt=="error"){
            alert("error: " + xhr.status + ": " + xhr.statusText);
            }
        });
    }); 
});

这里是servlet代码：

package anagrammiAjax;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.*;

@SuppressWarnings("serial")
public class AnagrammiAjaxServlet extends HttpServlet {
    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String parola = req.getParameter("parola");
        parola = parola.toLowerCase();
        System.out.println(parola);

        ArrayList<String> anagrammi = permutations(parola);
        for(int i=0; i<=anagrammi.size()-1; i++){
            System.out.println(anagrammi.get(i));
        }
        req.setAttribute("parola", parola);
        req.setAttribute("anagrammi", anagrammi);

        try {
            getServletContext().getRequestDispatcher("/anagrammi-partial.jsp").include(req, resp);
        } catch (ServletException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

    static ArrayList<String> permutations(String s) {
        ArrayList<String> ret = new ArrayList<String>();
        permutation(s.toCharArray(), 0, ret);
        return ret;
    }

    public static void permutation(char[] arr, int pos, ArrayList<String> list){
        if(arr.length - pos == 1)
            list.add(new String(arr));
        else
            for(int i = pos; i < arr.length; i++){
                swap(arr, pos, i);
                permutation(arr, pos+1, list);
                swap(arr, pos, i);
            }
    }

    public static void swap(char[] arr, int pos1, int pos2){
        char h = arr[pos1];
        arr[pos1] = arr[pos2];
        arr[pos2] = h;
    }
}

最后是jsp代码：

<%@ page language="java" contentType="text/html; charset=US-ASCII"
    pageEncoding="US-ASCII"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
        <c:forEach items="${anagrammi }" var="indice">
            <c:out value="${indice}"/>
        </c:forEach>

【问题讨论】：

问题是你的load() 函数实际上并没有传递表单数据。它只是告诉jsp页面加载，如果没有相应控制器期望的数据，页面就无法加载。表单通常设计用于传递数据并加载不同的页面。您可以使用 jQuery 在请求中发送带有 parola 的 AJAX 请求。不过，我对 jsp 的了解还不够，无法更清楚地回答。
我喜欢标题 load() - 不加载 XD

标签： javascript jquery html jsp servlets

【解决方案1】：

当用户单击提交按钮时，您将触发 Ajax 请求。

JavaScript 运行，然后提交表单，加载新页面，JavaScript 的执行环境消失并被新的环境取代。

您需要阻止表单提交。

$(document).ready(function(){   
    // Capture the event object in an argument
    $("#submit").click(function(evt) {
    // Prevent the default action
    evt.preventDefault();

【讨论】：

感谢您的回答。我试过这段代码： (' $(document).ready(function(){ $("#submit").click(function(evt){ evt.preventDefault(); alert("click"); $( "#aggiornare").load("test.txt", function(responseTxt, statusTxt, xhr){ if(statusTxt=="success"){ alert("contenutoesterno cariato correttamente"); } if(statusTxt==" error"){ alert("error: " + xhr.status + ": " + xhr.statusText); } }); }); }); ')

【解决方案2】：

尝试使用此代码，并使用“console.log”和浏览器的 devtools 而不是“alert”进行调试

$(document).ready(function(){   
    $("form").submit(function(event){
        console.log("submit form");
        event.preventDefault();
        var thisForm = $(this);

        var jqxhr = $.post("anagrammi-partial.jsp", thisForm.serialize())
        .done(function(data){
            console.log("contenuto esterno caricato correttamente");
            $("#aggiornare").html(data);
            })
        .fail(function(xhr, textStatus){
            console.log("error: "+textStatus );
            })
        .always(function(){
            console.log("finished");
            });

        });
    });

【讨论】：

您的解决方案可能有效，但无法回答load() 上的问题。当使用load() 来避免重定向时，您必须将负载用作load("anagrammiajax?parola="+parola) 之类的简单请求。您的操作将像经典表单提交一样执行，但不是重定向，而是将结果“加载”到您想要的任何地方。
你为什么重写整个东西（没有任何解释）而不是处理问题中的具体问题？
@Quentin 因为我认为对于想要了解 ajax 调用如何工作的人来说，使用 $.post / $.ajax 而不是 .load 更好。
为什么是-1？我的解决方案可能有效，我想帮助他：/
它重写了一堆已经奏效的东西，并没有解释许多改变中的哪一个真正解决了问题。