在 JSP 中看不到 Json 数据结果

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

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


qq_花开花谢_0
浏览 197回答 2
2回答

泛舟湖上清波郎朗

您在对另一个答案的评论中注意到,我仍然有一个白色的浏览器页面,但没有名称和地址,这表明浏览器正在远离您当前正在查看的页面,因此,您没有发出 Ajax 请求 - 或由于您没有禁用默认提交事件,您更有可能发出 Ajax 请求,但同时也发出标准 HTTP Post 请求。因此,您需要禁用默认提交操作。https://api.jquery.com/event.preventdefault/ https://www.w3schools.com/jquery/event_preventdefault.asp<form id="form">&nbsp; &nbsp; <input type="text" name="name" id="name"><br><br>&nbsp; &nbsp; <input type="text" name="address" id="address"><br><br>&nbsp; &nbsp; <input value="Submit" id="submit" type="submit"></form><p id="result"></p></body>$('#submit').click(function(e){&nbsp; &nbsp; e.preventDefault(); //prevent standard post&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'jsonserverlet',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $("#form").serialize(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var json= JSON.stringify(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(json + " " + data.name + " " + data.address);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#result").html(data.name + " " + data.address);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });})

LEATH

你错过了重点:你有 $ajax 但应该是$.ajax您也可以提交表单而不是 json,例如:function submitform(){&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'jsonserverlet',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $("#form").serialize(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var json= JSON.stringify(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(json + " " + data.name + " " + data.address);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#result").html(data.name + " " + data.address);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });}并在 servlet 中获取参数“名称”和“地址”:public void doPost(HttpServletRequest request, HttpServletResponse response)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; throws IOException {&nbsp; &nbsp; ...&nbsp; &nbsp; String name = request.getParameter("name");&nbsp; &nbsp; String address = request.getParameter("address");&nbsp; &nbsp; ...}答案的变化抱歉,我只关注警报消息的结论。Alan Hay 说得对,您可以使用它或将类型更改为按钮。无论如何,这是工作代码Servlet.javaimport 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 {&nbsp; &nbsp; public void doPost(HttpServletRequest request, HttpServletResponse response)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; throws IOException {&nbsp; &nbsp; &nbsp; &nbsp; response.setContentType("text/html;charset=UTF-8");&nbsp; &nbsp; &nbsp; &nbsp; PrintWriter out = response.getWriter();&nbsp; &nbsp; &nbsp; &nbsp; String jsonData = request.getParameter("per");&nbsp; &nbsp; &nbsp; &nbsp; out.print(jsonData);&nbsp; &nbsp; }}索引.jsp<html><head>&nbsp; &nbsp; &nbsp; &nbsp; <script src="http://code.jquery.com/jquery-2.2.4.js"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;type="text/javascript"></script></head><body>&nbsp; &nbsp; &nbsp; &nbsp; <form id="form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="name" id="name"><br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="address" id="address"><br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input value="Submit" type="button" onclick="submitform()">&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; <p id="result"></p></body><script>function submitform(){var&nbsp; userName = $('#name').val();var&nbsp; userAdd = $('#address').val();var myVar = JSON.stringify({name: userName, address:userAdd});&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'jsonserverlet',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: 'per=' + myVar,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var json= JSON.stringify(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(json + " " + data.name + " " + data.address);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#result").html(data.name + " " + data.address);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });}</script></html>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript