使用ajax将javascript数组发送到jsp

Question

So, I'm working on a MULTIPLE CHOICE QUESTION entry page and i want to handle it completely with ajax. I want to be flexible with the number of options the question has.
Here's the jquery part:

$("#QuestionModPageSubmitButton").click(function(){
       var QuesDesc=$("#QuesDesc").val();
       var Options=[];
       var QuestionId=$("#QuestionId").attr("data-id");
       var CorrectOption=$('input[type="radio"]:checked').val();
       var TotalOptions=$("#TotalOptions").attr("data-total");
       var SubjectId=$("#SubjectId").attr("data-id");

       for(var i=0;i<TotalOptions;i++)
        {
            Options.push($("#Option"+i).val());
        }


        $.ajax({
        type:"POST",
        url:"ajax/ModifyQuestion.jsp",
        data:{
                Subject:SubjectId,
                QID:QuestionId,
                Question:QuesDesc,
                OptionValues:Options,
                Correct:CorrectOption,
                TotalOptions:TotalOptions},

            });
});

I want to sent the Options Array to the jsp page "ModifyQueston.jsp".

Here's the jsp code i use for reading the sent data:

int SubjectId=Integer.parseInt(request.getParameter("Subject"));
int QuestionId=Integer.parseInt(request.getParameter("QID"));
String Question=request.getParameter("Question");
String[] Options=request.getParameterValues("OptionValues");
int CorrectOption=Integer.parseInt(request.getParameter("Correct"));
int TotalOptions=Integer.parseInt(request.getParameter("TotalOptions"));

But with these codes I'm not able to read the array in the jsp page. I get NullPointerException when i try to read the length of the Options array or when i try to read values by providing index.
I guess the script part of sending the data to jsp is fine. So the question is how to get it into jsp page.
I tried converting the array into a single string by separating each value with a '-' and then reading it using getParameter() function and then using split() function to separate it back to Array.

Script:

var OptionsString="";
for(var i=0;i<TotalOptions;i++)
{
    Options.push($("#Option"+i).val());
    OptionsString+=(Options[i]+((i<TotalOptions-1)?" - ":" "));
}

JSP:

String[] Options=(request.getParameter("OptionValues")).split("-");

It works fine. But I don't want to do it this way because if any of the options already contains '-' the Code will crash.

So, how to get this done?

Answer 1

You can sending multiple value by ajax. From the controller end (for spring framework) you just save it in a string. the data will bind with comma separated values. to do that, you need an array from javascript end, i mean your jsp side.

for checkbox you can use:

var idVal = [];
var i = 0;
$('.case:checked').each(function() {
   idVal[i] = $(this).val();
   i++;
});

From controller side you can get the value:

String[] id = req.getParameter("id_").split(",");

As the same way you can do this for dropdown (options).
This is worked for me when using spring framework.
Thanks.

Answer 2

Okay, so after a couple of weeks of research I found out a way to send the array from js to jsp. The previous code needed just a little modification. Here's the js part which needed modification.I just had to add brackets as in arrays, in the data section.

        $.ajax({
    type:"POST",
    url:"ajax/ModifyQuestion.jsp",
    data:{
            Subject:SubjectId,
            QID:QuestionId,
            Question:QuesDesc,
            Correct:CorrectOption,
            "Options[]":Options
         },

        });

Notice that I wrote Options as "Options[]". This makes jsp understand that the variable being sent is an array.

Now, the jsp page didn't really require much modification.

String[] Options=request.getParameterValues("Options[]");

And any further operations can be performed as normal strings.

So, yeah that worked for me!..