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

时间:2014-12-03 19:00:16

标签: javascript java json jsp

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

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

<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>

请求帮助找到程序无效的问题

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

是的,正确JSON.parse(data)导致错误。

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

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

下面演示的jsFiddle是here

&#13;
&#13;
$(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();
    });
});
&#13;
<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" />
&#13;
&#13;
&#13;