如何将json对象从服务器发送到jsp并在jsp上接收响应答案

【问题标题】：how to send json object from server to jsp and receive a response on jsp如何将json对象从服务器发送到jsp并在jsp上接收响应
【发布时间】：2014-12-03 19:00:16
【问题描述】：

我的 java 服务器从 JSP 接收 JSON 并进行一些操作，我尝试通过以下方式将 JSON 对象发送到 JSON：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
{

    JSONObject newObj = new JSONObject();

    try {
        newObj = new JSONObject(request.getParameter("jsonData"));
    } catch (JSONException e) {
        e.printStackTrace();
    }

    int  val2 = 0;
    int val1 = 0;

    try {
        val2 = Integer.parseInt(newObj.getJSONObject("mydata").getString("number2"));
        val1 = Integer.parseInt(newObj.getJSONObject("mydata").getString("number1"));
    } catch (JSONException e) {
        e.printStackTrace();
    }

    System.out.println(val2 + val1);
    Double d =  Math.pow(val1, 2);

    PrintWriter writer = response.getWriter();
    JSONObject obj=new JSONObject();

    try {
        obj.put("results",d);
        obj.put("resultText","foo");
    } catch (JSONException e) {
        e.printStackTrace();
    }

    writer.println(obj);
    writer.flush();
    System.out.println(d);
}

我将 JSON 发送到服务器并尝试从服务器接收 JSON 对象响应的 JSP

<body>
   <h3>Please enter a number to Square : </h3>
   <input style="width: 33px; margin-left: 2px; " type="text" id="number1" name="number1">
   <input style="width: 33px; margin-left: 2px;" type="text" id="number2" name="number2">
   <input type="button" onclick="callServlet();" value="Calc">
   <input style="font-family: cursive; border:none" type="text"   id="result" />
   <input style="font-family: cursive; border:none; width: 100%" type="text"  value=""  id="resultText" />

 </body>
 <script>
        function callServlet() {
            var input1 = document.getElementById('number1').value;
            var input2 = document.getElementById('number2').value;
            var myData = {"mydata": {"number1": input1, "number2": input2}};
            $.ajax({
                type: "GET",
                url: "/AjaxServletCalculator",
                data: {jsonData: JSON.stringify(myData)},
                dataType: "json",

                //if received a response from the server
                success: function (data) {
                    //our country code was correct so we have some information to display

                        var json = JSON.parse(data);        
                        alert(json["resultText"]);        
                       /*document.getElementById('number1').value = data.*/        
                }
            });
        }
 </script>

请帮助找出程序无法运行的问题

【问题讨论】：

您是否收到错误消息？你有没有在浏览器网络控制台中查看服务器返回给ajax请求的内容？
我没有任何错误信息，但这就是我能找到的，也许它会帮助你 goo.gl/6QkHha" width="100" height="100">跨度>
是的，这有帮助。看来您没有正确包含 jQuery。您的浏览器的 $ 引用未知。
如何在没有 $ 字符的情况下使用 ajax 方法据我所知，ajax 方法以字符 $
$.ajax 是 jQuery.ajax 的缩写形式，您需要将 jQuery 添加到您的 html 中。在您的 <head>- 或 <body>-tag 中添加以下代码，它应该可以工作：<script src="//cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js"></script>

标签： javascript java json jsp

【解决方案1】：

是的，没错JSON.parse(data) 导致错误。

还将您的脚本包装在 document.ready 函数 $(function(){ ... }); 中，以确保 DOM 在您访问之前已准备就绪。

您的其余代码正在运行。我只是将参数注释到服务器，因为我没有可以处理它的后端。

下面演示的 jsFiddle 是here。

$(function () {
    function callServlet() {
        var input1 = $("#number1").val(); //document.getElementById('number1').value;
        var input2 = $("#number2").val(); //document.getElementById('number2').value;
        var myData = {
            "mydata": {
                "number1": input1,
                "number2": input2
            }
        };
        //console.log(myData);
        $.ajax({
            type: "GET",
            url: 'http://www.mocky.io/v2/547f86501713955b0a8ed4da',  //"/AjaxServletCalculator",
            data: {
                //jsonData: JSON.stringify(myData) // this works but mocky.io doesn't support it
            },
            dataType: "json",

            //if received a response from the server
            success: function (json) {
                //our country code was correct so we have some information to display
                console.log(json);
                //var json = JSON.parse(data);
                alert(json.data);
                /*document.getElementById('number1').value = data.*/
            }
        });
    }
    
    $('#calcBtn').click(function() {
        callServlet();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Please enter a number to Square : </h3>

<input style="width: 33px; margin-left: 2px; " type="text" id="number1" name="number1">
<input style="width: 33px; margin-left: 2px;" type="text" id="number2" name="number2">
<input type="button" id="calcBtn" value="Calc">
<input style="font-family: cursive; border:none" type="text" id="result" />
<input style="font-family: cursive; border:none; width: 100%" type="text" value="" id="resultText" />

【讨论】：

alert(json.data); 应该是 alert(json.resultText); 就像 servlet` obj.put("results",d); obj.put("resultText","foo"); ` 没有什么比得上data
是的，对不起，我忘了提。 json.data 仅用于我的模拟。 json.resultText 是对的，如果你的服务器返回的话。
我按照描述做了所有事情，但出现了一些错误，这是截图dropbox.com/s/woczbtengkpdgmv/001.jpg?dl=0
从您的代码中删除第 49 行并将第 50 行更改为 alert(json.resultText);。如果这导致错误，您还可以执行 console.log(json); 以查看服务器响应中可用的密钥。
谢谢你，我明白一切正常，问题是这个字符串 var json = JSON.parse(data);

【解决方案2】：

 <script>
 function callServlet() {
var input1 = document.getElementById('number1').value;
var input2 = document.getElementById('number2').value;
var myData = {"mydata": {"number1": input1, "number2": input2}};
$.ajax({
    type: "GET",
    url: "/AjaxServletCalculator",
    data: {jsonData: JSON.stringify(myData)},
    dataType: "json",

    //if received a response from the server
    success: function (data) {
        //our country code was correct so we have some information to display

          //  var json = JSON.parse(data);        
            alert(data.resultText);        
           /*document.getElementById('number1').value = data.*/        
      }
  });
 }
</script>

试试上面的

删除 var json = JSON.parse(data);

【讨论】：

真正的问题是现在一切正常，非常感谢您的帮助！