How to pass multiple parameters not in the URL?

Question

Currently the form data is passed via the URL, like below.

document.getElementById('newChildForm').action = "./populateImageProcessing?personId="+ temp+ "&category="+ strUser+ "&fromDate="+ frmDate+ "&toDate=" + toDate+"&advFromDayID="+advFromDayID+"&advFromMonthID="+advFromMonthID+"&advFromYearID="+advFromYearID+"&advToDayID="+advToDayID+"&advToMonthID="+advToMonthID+"&advToYearID="+advToYearID;

document.getElementById('newChildForm').submit();

I want to pass the form data separately, and not via the URL.

I tried the below with ajax/jQuery

$.ajax({
        cache: false,
        url : "./populateImageProcessing",
        type : "POST",
        data : "personId=" + temp + "&category="
                    + strUser
                    + "&fromDate="+ frmDate+ "&toDate=" + toDate+ "&advFromDayID="+advFromDayID+"&advFromMonthID="+advFromMonthID+"&advFromYearID="+advFromYearID+"&advToDayID="+advToDayID
                    +"&advToMonthID="+advToMonthID+"&advToYearID="+advToYearID,
success: function(data){
$("#newChildForm").html(data); 
}
 }); 

The jQuery working in SIT environment, but I've some trouble in UAT environment due to CSP.

Is there any way could use plain javascript document.getElementById('newChildForm').action="./populateImageProcessing" , and pass the parameters separately, and not in the URL.

Please help. Thank you.

Answer 1

Try with this code :

var data = "personId=" + temp + "&category="+ strUser+ "&fromDate="+ frmDate+ "&toDate=" + toDate+ "&advFromDayID="+advFromDayID+"&advFromMonthID="+advFromMonthID+"&advFromYearID="+advFromYearID+"&advToDayID="+advToDayID+"&advToMonthID="+advToMonthID+"&advToYearID="+advToYearID;

var xhttp= new XMLHttpRequest();

xhttp.open("POST", "populateImageProcessing", true);

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById('newChildForm').innerHTML = this.responseText
       }
    };

xhttp.send(data); 

Answer 2

Have you tried something like this ?
Json is a good way to pass multiple parameters.

var obj = { personId: temp, category: strUser, fromDate: frmDate, toDate: toDate, advFromDayID :advFromDayID, advFromMonthID: advFromMonthID, advFromYearID: advFromYearID, advToDayID: advToDayID, advToMonthID: advToMonthID, advToYearID: advToYearID };
$.ajax({
    cache: false,
    url: "./populateImageProcessing",
    type: 'POST',
    data: JSON.stringify(obj),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data){
        $("#newChildForm").html(data); 
    }
});

But I don't know if you can handle it on the "server" side ?
Tell me. Hope it helps.