javascript - how to send json object from server to jsp and receive a response on jsp

My java server receives JSON from JSP and make some operation and I try to send JSON object to JSON in the following way:

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

My JSP where I send JSON to server and try to receive JSON object response from server

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

pleas help find the problem on which the program does not work

My java server receives JSON from JSP and make some operation and I try to send JSON object to JSON in the following way:

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

My JSP where I send JSON to server and try to receive JSON object response from server

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

pleas help find the problem on which the program does not work

Share Improve this question edited Apr 8, 2017 at 11:05 Dariush Jafari 5,4538 gold badges44 silver badges74 bronze badges asked Dec 3, 2014 at 19:00 Partizanin 3332 gold badges5 silver badges12 bronze badges

Do you get an error message? Have you checked in the browser network console what the server returns to the ajax request? – AWolf Commented Dec 3, 2014 at 19:10
I don't have any error message but that's what I could find, maybe it will help you <img src="goo.gl/6QkHha" width="100" height="100"> – Partizanin Commented Dec 3, 2014 at 20:30
Yes, that helps. It seems that you haven't included jQuery correctly. The $ reference is unknown for your browser. – AWolf Commented Dec 3, 2014 at 20:37
how i can use ajax method without $ character As far as I know ajax method begins with character $ – Partizanin Commented Dec 3, 2014 at 20:48
$.ajax is the short form for jQuery.ajax you need to add jQuery to your html. Add the following code inside of your <head>- or <body>-tag and it should work: <script src="//cdn.jsdelivr/jquery/2.1.1/jquery.min.js"></script> – AWolf Commented Dec 3, 2014 at 21:03

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

Yes, that's right JSON.parse(data) resulted in an error.

Also wrap your script in a document.ready function $(function(){ ... }); to be sure that the DOM is ready before you access it.

The rest of your code is working. I just mented the parameters to the server because I have no backend that can handle it.

The jsFiddle to the demo below is 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./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" />

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

try above

remove var json = JSON.parse(data);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to send json object from server to jsp and receive a response on jsp - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)