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);
            }
        });
})

Answer 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中获取参数“名称”和“地址”：

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>

在JSP中看不到Json数据结果

2 个答案: