Question

以下是问题的解决方案。感谢所有人，特别感谢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详细说明了排列广告将它们发送到jsp页面“anagrammi- partial.jsp
jsp页面只使用foreach打印所有排列
我想在index.html页面中使用ajax load（）方法将一个div显示为jsp页面的内容

问题：

我不希望在servlet详细说明之后重定向到jsp页面，但我不会再显示idex.html更新的div（可能是从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>

Answer 1

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

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

您需要停止提交表单。

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

Answer 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（） - 不加载

2 个答案: