CODEWITHSUNDEEP
javajqueryajaxjson
kittu
kittu

Reputation: 7018

json value returning null when sent with ajax request

I am trying to send json string to server and then store it in db

Following is my code:

$.ajax({
        url: 'JsonProcessor.do',
        type: 'post',
        dataType: 'json',
        data: {
                loadProds: 1,
                test: JSON.stringify(StateObject)
              },
        success: function (data) 
        {
        console.log("worked");
        },
         error: function (data) {
         alert('failed');
        }
        });

Servlet:

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

        String json = request.getParameter("test");
        System.out.println("json is: " + json);
        Connection con = null;
        ResultSet rs = null;
        try {
            con = OracleDBConnection.getConnection();
            String query = "insert into JJS (JSON_INFO) values(?)";
            PreparedStatement pst = con.prepareStatement(query);
            pst.setString(1, json);
            rs = pst.executeQuery();
            if (rs.next()) {
                System.out.println("sucess");
            } else {
                System.out.println("failed");
            }
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("DB releated exception");
        }

However, when I try to print request.getparameter(json) it returns null.

This is json I am trying to send:

 {
    "cells": [
        {
            "type": "basic.Rect",
            "position": {
                "x": -2,
                "y": 33
            },
            "size": {
                "width": 71,
                "height": 625
            },
            "angle": 0,
            "isInteractive": false,
            "id": "e276b993-af5e-4e32-9879-fc3d817c0811",
            "z": 1,
            "attrs": {
                "rect": {
                    "fill": "#EEEEEE",
                    "stroke": "#008B8B",
                    "stroke-width": 2
                },
                ".": {
                    "magnet": false
                }
            }
        },
        {
            "type": "basic.Rect",
            "position": {
                "x": 10,
                "y": 50
            },
            "size": {
                "width": 51,
                "height": 41
            },
            "angle": 0,
            "isInteractive": false,
            "id": "f8826904-678c-4857-ad46-f86e69d1db32",
            "z": 2,
            "attrs": {
                "rect": {
                    "fill": "#D6F2FC",
                    "stroke": "#7E7E7E"
                },
                ".": {
                    "magnet": false
                }
            }
        },
        {
            "type": "basic.Circle",
            "size": {
                "width": 53,
                "height": 53
            },
            "position": {
                "x": 8,
                "y": 130
            },
            "angle": 0,
            "isInteractive": false,
            "id": "e4ee7b74-3c06-4e1e-8ce7-8baf6743c27c",
            "z": 3,
            "attrs": {
                ".": {
                    "magnet": false
                },
                "circle1": {
                    "fill": "white",
                    "stroke-width": 2,
                    "stroke": "green"
                }
            }
        },
        {
            "type": "basic.Circle",
            "size": {
                "width": 53,
                "height": 53
            },
            "position": {
                "x": 8,
                "y": 225
            },
            "angle": 0,
            "isInteractive": false,
            "id": "04d4a40b-f99b-4c16-89a9-7d072e30c4ad",
            "z": 4,
            "attrs": {
                ".": {
                    "magnet": false
                },
                "circle2": {
                    "fill": "white",
                    "stroke": "green"
                }
            }
        },
        {
            "type": "basic.Circle",
            "size": {
                "width": 53,
                "height": 53
            },
            "position": {
                "x": 8,
                "y": 320
            },
            "angle": 0,
            "isInteractive": false,
            "id": "97a01219-b7e2-4a52-9248-eb41dc7443b4",
            "z": 5,
            "attrs": {
                ".": {
                    "magnet": false
                },
                "circle3": {
                    "fill": "white",
                    "stroke": "green"
                }
            }
        },
        {
            "type": "basic.Rect",
            "position": {
                "x": 10,
                "y": 420
            },
            "size": {
                "width": 51,
                "height": 41
            },
            "angle": 0,
            "isInteractive": false,
            "id": "ed74bfd7-c7e2-4f68-85c3-0f1865243d3e",
            "z": 6,
            "attrs": {
                ".": {
                    "magnet": false
                },
                "rectGroup0": {
                    "fill": "white",
                    "stroke": "#7E7E7E"
                }
            }
        },
        {
            "type": "basic.Rect",
            "position": {
                "x": 35,
                "y": 505
            },
            "size": {
                "width": 45,
                "height": 45
            },
            "angle": 0,
            "isInteractive": false,
            "id": "008c90ea-2598-4761-8775-fc3601c8935d",
            "z": 7,
            "attrs": {
                "rect": {
                    "fill": "#FFED6B",
                    "stroke": "#DBCB62",
                    "width": 1,
                    "height": 1,
                    "stroke-width": 1,
                    "transform": "rotate(45)"
                },
                ".": {
                    "magnet": false
                }
            }
        }
    ]
}

Upvotes: 0

Views: 309

Answers (1)

Niko
Niko

Reputation: 6269

There are multiple issues with your code:

When sending, jquery already does the stringify for you, so you when calling it yourself you are actually creating a string attribute in the json sent (you can check this out easily by watching the data sent using your browser)

 $.ajax({
    url: 'JsonProcessor.do',
    type: 'post',
    dataType: 'json',
    data: {
            loadProds: 1,
            test: JSON.stringify(StateObject)
          },
      ...

will actually create a http request body that looks like:

{
   loadProds: 1,
   test: "{\"state\": .... "
}

so just write:

 $.ajax({
    url: 'JsonProcessor.do',
    type: 'post',
    dataType: 'json',
    data: {
            loadProds: 1,
            test: StateObject
          },
      ...

and you will be fine on that part.

As for the server part, you are actually looking for a request parameter named "test". But this is not what is being sent. Instead, you are getting a "body" that includes a json. there simply are no standard request parameter when using dataType:json.

so in your case it is

 String json = IOUtils.toString(request.getInputStream());

Also not that the json you retrieve there includes the "loadProps: 1"... You then might want to convert the string into an object (using i.e. jackson) so you can work with it.

Upvotes: 4

Related Questions