如何在Servlet上使用JSON将多个参数传递给Ajax

Question

I have JavaScript code that should get two parameters from servlet:
player name and player type (Human \\ Computer)

The JavaScript use Ajax to send the request to the servlet named: UpdateStatusPaneServlet.java

On the servlet I created ArrayList<String> of 2 parameters and sent it to the Ajax.

You can see in the picture that the array appears ok.

I am not sure how to get the parameters using the indexOf() function or maybe I need to use other function.
I also tried with get() but it didn't work.
Also with playerNameAndType[0] it just print '['

JavaScript :

function printStatusPane() {

    $.ajax({
        url: "UpdateStatusPaneServlet",
        timeout: 2000,
        error: function() {
            console.log("Failed to send ajax");
        },
        success: function(playerNameAndType) {
            console.log("GOT ajax: " + playerNameAndType);
            $("#currentPlayer").append(playerNameAndType.indexOf(0));
            $("#playerType").append(playerNameAndType.indexOf(1));
        }
    });
}

Servlet (Java) :

  protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
         response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            Gson gson = new Gson();
            String currentPlayerNameJSON = "";
            String playerTypeJSON = "";
            Engine engine = (Engine)getServletContext().getAttribute("engine");
            ArrayList<String> JSONRequest = new ArrayList<String>(2);

            currentPlayerNameJSON = gson.toJson(engine.GetCurrentPlayer().GetPlayerName());
            playerTypeJSON = gson.toJson(engine.GetCurrentPlayer().GetPlayerType().toString());

            JSONRequest.add(currentPlayerNameJSON);
            JSONRequest.add(playerTypeJSON);
            out.print(JSONRequest);

        } finally {
            out.close();
        }
    }

Answer 1

Following DT comment I fixed it:

  var arrayJson = JSON.parse(playerNameAndType); 
  $("#currentPlayer").append(arrayJson[0]);
  $("#playerType").append(arrayJson[1]);

And it prints it correctly.

Answer 2

indexOf returns the position of the array value.Use key index to take the array value and append in to the id

playerNameAndType = ["Bob", "Human"];
$("#currentPlayer").append(playerNameAndType[0]);
$("#playerType").append(playerNameAndType[1]);

Answer 3

As you said, console output is ["Bob", "Human"] You can access that directly by index :

$("#currentPlayer").append(playerNameAndType[0]);
$("#playerType").append(playerNameAndType[1]);

What indexof() return is index of element you passed in argument.

playerNameAndType.indexOf("Bob")

will give you 0 , the index of "Bob".

Example :

 var person = ["Bob", "Human"]; document.write("Hey, " + person[0] + "!! You are first in array."); 

Answer 4

you are getting an array of objects . Just simply retrieve the object from it's index .

$("#currentPlayer").append(playerNameAndType[0]);
$("#playerType").append(playerNameAndType[1]);

Answer 5

Instead of the below code

ArrayList<String> JSONRequest = new ArrayList<String>(2);
currentPlayerNameJSON = gson.toJson(engine.GetCurrentPlayer().GetPlayerName());
playerTypeJSON = gson.toJson(engine.GetCurrentPlayer().GetPlayerType().toString());
JSONRequest.add(currentPlayerNameJSON);
JSONRequest.add(playerTypeJSON);
out.print(JSONRequest);

Please try

currentPlayerNameJSON = gson.toJson(engine.GetCurrentPlayer().GetPlayerName());
playerTypeJSON = gson.toJson(engine.GetCurrentPlayer().GetPlayerType().toString());
HashMap<String, String> responseMap = new HashMap<String,String>();
resposeMap.put("name",currentPlayerNameJSON );
resposeMap.put("type",playerTypeJSON );
out.print(responseMap.toString());

and in the javaScript you can

function printStatusPane() {

    $.ajax({
        url: "UpdateStatusPaneServlet",
        timeout: 2000,
        error: function() {
            console.log("Failed to send ajax");
        },
        success: function(playerNameAndType) {
           var json = $.parseJSON(playerNameAndType);    
            $("#currentPlayer").append(json['name']);
            $("#playerType").append(json['type']);
        }
    });
}

Answer 6

You are returning an ArrayList-"JSONRequest" having Json objects from your servlet. Try converting your arraylist to Json by JSON.stringify(JSONRequest) . You can then handle this Json in client side.