CODEWITHSUNDEEP
javascriptjqueryajax
user5520878
user5520878

Reputation:

how to make Ajax call with array and string parameters

I want to make ajax call to my server with array value and sting parameters.

This is my function I am using in my page.

var globalArray = [];

function submit() {
    var string_MyVal, jsonBody, string_MyVal1, string_MyVal2, string_MyNameVal, string_MyNameDesc, string_MyNameFlag;

    string_MyVal1 = 150;    
    string_MyVal = "sel.html";
    string_MyVal2 = "string_MyVal2";
    string_MyNameVal = "string_MyNameVal";
    string_MyNameDesc ="string_MyNameDesc";
    string_MyNameFlag =  "private"; 

    jsonBody = 'storedSelections=' + globalArray + 
                '&string_MyVal='+ string_MyVal + 
                '&string_MyVal1='+ string_MyVal1 +
                '&string_MyVal2='+ string_MyVal2 + 
                '&string_MyNameVal=' + string_MyNameVal + 
                '&string_MyNameDesc='+ string_MyNameDesc + 
                '&string_MyNameFlag=' + string_MyNameFlag;

    $.ajax({
        async : false,
        type : "POST",
        url : 'http://example.com:8080/myApp/DataServlet',
        data : jsonBody,
        success : function(data) {
            setToken(data);
        },
        error : function(data, status, er) {
            alert("error: " + data + " status: " + status + " er:" + er);
        }
    });
}

In my servlet this globalArray comes as only "object object". There is more contents in that array..

how to pass this array and string values to my servlet.

I know to use JSON.stringify solved this,

var selections = JSON.stringify(globalSelection);
alert(selections

This works and the data is shown as below, 

[{"range":{},"type":3,"rCollection":[{"range":{},"node":{},"tagName":"P","tagIndex":2,"data":"lot%20","nodeType":3,"sIdx":14,"eIdx":18,"fontColor":"yellow","bgColor":"green"}],"textContent":"lot%20","anchorNode":{},"focusNode":{},"selectionId":181862,"yPOS":0}]

But this wont support safari and iOS.

Can anyone assist here how to pass my array value to servlet along with string values in same ajax call.

EDIT:

This is the update I tried,

function textSelection(range, anchorNode, focusNode) {
    this.range = range;
    this.type = 3;
    this.rCollection = [];
    this.textContent = encodeURI(range.toString());
    this.anchorNode = anchorNode;
    this.focusNode = focusNode;
    this.selectionId = getRandom();
    this.yPOS = getYPOS();

    this.getTagName = function(range) {
        var el = range.startContainer.parentNode;
        return el;
    }
    this.getTagIndex = function(el) {
        var index = $(el.tagName).index(el);
        return index;
    }

    this.simpleText = function(node, range) {
        if (!node)
            var entry = this.createEntry(this.anchorNode, this.range);
        else
            var entry = this.createEntry(node, range);
        this.rCollection.push(entry);
        this.highlight(this.rCollection[0].range);
        this.crossIndexCalc();
        textSelection._t_list.push(this);
        pushto_G_FactualEntry(this);
    }

    this.compositeText = function() {
        this.findSelectionDirection();
        var flag = this.splitRanges(this.anchorNode, this.focusNode,
                this.range.startOffset, this.range.endOffset);
        if (flag == 0) {
            for (j in this.rCollection) {
                this.highlight(this.rCollection[j].range);
            }
        }
        this.crossIndexCalc();
        textSelection._t_list.push(this);
        pushto_G_FactualEntry(this);
    }

    this.toJSON = function() { 
    return  {range: this.range};
}

}

In globalSelection, I have the elements of above textSelection. I added toJSON to this as suggested.

Now I am getting the result in console as below, 

[{"range":{}}]

It comes as empty value...

Upvotes: 1

Views: 535

Answers (2)

TOAOGG
TOAOGG

Reputation: 392

Javascript offers methods for serialization:

toJSON()

This function is used to define what should be part of the serialization. Basically you can create a clone of the object you want to serialize excluding cyclic dependencies or data that should not be send to the server.

More information on this behaviour can be found here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#toJSON()_behavior

JSON.stringify()

This function calls toJSON() and serializes the returned object.

Example: 

var objectToSend = {};
objectToSend.varX = 5;
objectToSend.varY = 10;
objectToSend.toJSON = function() { return {varX: this.varX}; }
var jsonString = JSON.stringify(objectToSend);

The result will be: 

"{"varX":5}"

Upvotes: 2

SPlatten
SPlatten

Reputation: 5762

If you are writing both the client and server implementations then I would advise creating your data as a JSON object then using base64 encoding to convert the JSON object to a string that you can send as one encoded parameter:

    encodededjson=(BASE 64 encoded JSON here)

Then on the server you just use the equivalent base 64 decode routine to translate the encoded data back to JSON. So you use:

    var strJSON = JSON.stringify(globalSelection);

And pass the result of this to the base64 encode routine, then use the result from that to build your Post:

    var strJSON = JSON.stringify(globalSelection);
       ,strEncoded = Base64.encodeBase64(new String(strJSON.getBytes()))
       ,strPost = "datatopost=" + strEncoded;

Upvotes: -1

Related Questions