javascript - 在 JSP 中看不到 Json 数据结果

Question

在我的 .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); 

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

Answer 1

您在对其他答案的评论中注意到，我仍然有一个白色的浏览器页面，但没有名称和地址，这表明浏览器正在离开您当前正在查看的页面，因此，您没有发出 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);
            }
        });
})