Question

我正在尝试从JSP页面进行AJAX调用，但是我无法将返回的响应呈现给textarea。 Ajax调用正在给出正确的响应，我能够登录Console但无法附加到textarea

以下是代码：

的index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
body {
    background-image:
        url('https://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png');
}
</style>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Initialization</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"
    type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
    <form>
        <textarea rows="6" cols="25" id="request"></textarea>
        <button id="Submit">Submit</button>
        <textarea rows="6" cols="25" id="response"></textarea>
    </form>

</body>
</html>

的script.js

$(document).ready(function() {
    $('#Submit').click(function() {
        $.ajax({
            type : 'POST',
            data : {
                request : $('#request').val()
            },
            url : 'Initialization',
            success : function(result) {
                console.log(result);
                $('#response').text(result);
            }
        });
    });
});

Answer 1

明确指定您的按钮类型type='button'，然后再试一次。否则，这可能会导致页面重新加载。

Answer 2

问题是您需要使用以下方法取消表单的默认操作： evt.preventDefault(); 并使用val（）来设置响应。

$(document).ready(function(evt) {
    console.log("submit")

    $('#Submit').click(function(evt) {
        evt.preventDefault();
        $.ajax({
            type : 'POST',
            data : {
                name : $('#request').val()
            },

            url : 'Initialization',
            success : function(result) {
                console.log(result);
                $('#response').val(result);
            }
        });
    });
});

Ajax从JSP页面调用servlet

2 个答案: