在 JSP 中看不到 Json 数据结果答案

【问题标题】：don't see Json data result in JSP在 JSP 中看不到 Json 数据结果
【发布时间】：2020-03-17 08:15:50
【问题描述】：

在我的 .JSP 文件中：

<form id="form">
    <input type="text" name="name" id="name"><br><br>
    <input type="text" name="address" id="address"><br><br>
    <input value="Submit" type="submit" onclick="submitform()">
</form>
<p id="result"></p>
</body>

我的 Javascript 函数是：

function submitform(){

var  userName = $('#name').val();
var  userAdd = $('#address').val();

var myVar = JSON.stringify({name: userName, address:userAdd});

        $ajax({
            url: 'jsonserverlet',
            type: 'POST',
            data: 'per=' + myVar,
            dataType: 'json',

            success:function(data){

            var json= JSON.stringify(data);
            alert(json + " " + data.name + " " + data.address);
            $("#result").html(data.name + " " + data.address);

            }

        });



};

我还创建了一个带有一些数据的新类 User.java，然后在我的 Jsoncontent.java 中，在方法 POST 中我设置了我的变量并创建了一个这样的 json 请求：

        String jsonData = request.getParameter("per");
        System.out.println(jsonData);

        Gson gson = new Gson();

        User data = gson.fromJson(jsonData, User.class);

        System.out.println("Fetching json object");
        String name = data.getName();
        String address = data.getAddress();

        System.out.println("User Name: "+ name );
        System.out.println("User Address: "+ address );

        User user = new User();

        user.setName(name);
        user.setAddress(address);

        String jsonObj = gson.toJson(user);
        System.out.println(jsonObj);

        out.print(jsonObj);

所以，所有工作都没有错误或警告，但是当我单击提交按钮时我看不到结果。我不知道为什么。

【问题讨论】：

您是否调试过您的代码或至少使用一些日志语句来查看 servlet 是否已被调用以及 JavaScript 代码是否完全运行？
是的，我已经尝试使用 try 和 catch 方法向我返回一些东西，但没有任何反应。是的，servlet 已被调用
好的。您已经发布了代码片段，如果没有更广泛的上下文，没有人可以提供帮助。发布完整的 jsp 和服务器端处理程序。

标签： javascript java json forms jsp

【解决方案1】：

您在 cmets 中注意到另一个答案 我仍然有一个白色的浏览器页面，但没有名称和地址，这表明浏览器正在离开您当前正在查看的页面，因此，您没有发出 Ajax 请求 - 或者您更有可能发出 Ajax 请求，但由于您没有禁用而也发出标准 HTTP Post 请求默认提交事件。

因此您需要禁用默认提交操作。

https://api.jquery.com/event.preventdefault/ https://www.w3schools.com/jquery/event_preventdefault.asp

<form id="form">
    <input type="text" name="name" id="name"><br><br>
    <input type="text" name="address" id="address"><br><br>
    <input value="Submit" id="submit" type="submit">
</form>
<p id="result"></p>
</body>


$('#submit').click(function(e){
    e.preventDefault(); //prevent standard post

        $.ajax({
            url: 'jsonserverlet',
            type: 'POST',
            data: $("#form").serialize(),
            dataType: 'json',

            success:function(data){
            var json= JSON.stringify(data);
            alert(json + " " + data.name + " " + data.address);
            $("#result").html(data.name + " " + data.address);
            }
        });
})

【讨论】：

********* 好的解决了！在我的表格中，我错过了一个 id="submit" 并且代码是正确的。非常感谢

【解决方案2】：

你没有抓住重点：你有 $ajax 但应该是 $.ajax

你也可以提交表单而不是json，比如：

function submitform(){
        $.ajax({
            url: 'jsonserverlet',
            type: 'POST',
            data: $("#form").serialize(),
            dataType: 'json',

            success:function(data){
            var json= JSON.stringify(data);
            alert(json + " " + data.name + " " + data.address);
            $("#result").html(data.name + " " + data.address);
            }
        });
}

并在servlet中获取参数“name”和“address”：

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
    ...
    String name = request.getParameter("name");
    String address = request.getParameter("address");
    ...
}

答案的变化

对不起，我只关注警报消息的结论。 Alan Hay 说得对，您可以使用它或将类型更改为按钮。无论如何，这是工作代码

Servlet.java

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(urlPatterns = "/jsonserverlet")
public class Servlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        String jsonData = request.getParameter("per");
        out.print(jsonData);
    }
}

index.jsp

<html>
<head>
        <script src="http://code.jquery.com/jquery-2.2.4.js"
         type="text/javascript"></script>
</head>
<body>
        <form id="form">
            <input type="text" name="name" id="name"><br><br>
            <input type="text" name="address" id="address"><br><br>
            <input value="Submit" type="button" onclick="submitform()">
        </form>
        <p id="result"></p>
</body>
<script>
function submitform(){
var  userName = $('#name').val();
var  userAdd = $('#address').val();

var myVar = JSON.stringify({name: userName, address:userAdd});
        $.ajax({
            url: 'jsonserverlet',
            type: 'POST',
            data: 'per=' + myVar,
            dataType: 'json',

            success:function(data){

            var json= JSON.stringify(data);
            alert(json + " " + data.name + " " + data.address);
            $("#result").html(data.name + " " + data.address);
            }
        });
}
</script>
</html>

【讨论】：

我修复了 $.ajax .. 所以当我运行我的程序时它仍然一样，我的 URL 的输出是：localhost:8080/Jsoncontent/?name=ergerg&address=egergeg 好的，但我仍然有一个白色的浏览器页面但没有姓名和地址。
在servlet中检查所有数据是否正确接收，是否在响应中正确传输
我尝试发送相同的线路并且一切正常。喜欢response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String jsonData = request.getParameter("per"); out.print(jsonData);
对不起，我可以在哪里添加此代码？总是在我的 post 方法中？
据我了解，您正在 servlet 中发出 post 类型的 ajax 请求，然后将此代码粘贴到指定 servlet 的 doPost 中