从JSP页面到servlet的Ajax调用

Question

我正在尝试从JSP页面进行AJAX调用，但是我无法将返回的响应呈现给textarea。 Ajax呼叫给出了正确的响应，我能够登录控制台，但无法追加到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);
            }
        });
    });
});

从JSP页面到servlet的Ajax调用

问题描述

2 个解决方案

解决方案1
0 2017-04-23 17:41:23

解决方案2
0 已采纳 2017-04-23 17:48:15

从JSP页面到servlet的Ajax调用

问题描述

2 个解决方案

解决方案1 0 2017-04-23 17:41:23

解决方案2 0 已采纳 2017-04-23 17:48:15

解决方案1
0 2017-04-23 17:41:23

解决方案2
0 已采纳 2017-04-23 17:48:15