XMLHttpRequest + FormData

Cocos Creator
#1

Hi, we tried to use FormData with XMLHttpRequest but we have this error in android:

E/jswrapper: ERROR: Uncaught ReferenceError: FormData is not defined, location: assets/main/index.9f04f.jsc:0:0

some people have any idea to resolve it?

Many thanks for help!

Stefano

#2

Share complete codes. Looked like coding issues.

#3

var formData = new FormData();
formData.append(“username”, username);
formData.append(“world”, world);
formData.append(“level”, level);
formData.append(“data”, data);
formData.append(“multiplayer”, multiplayer);

    this.POST('tools/gs_addNewPlayerData.php', formData, callback, error, scope);

…

POST(file, formData, callback, error, scope) {

    var xhr = new XMLHttpRequest();
    // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    var url = this.server + file;

    try {
        xhr.open('POST', url, true);
    }
    catch(e) {
        console.log(e);
    }

    xhr.id = cc.MyMath.uuidv4();

    if(callback !== undefined && scope !== undefined)
        this.callback[xhr.id] = {callback: callback, error:error, scope: scope};

    var self = this;

    xhr.onreadystatechange = function() {
        
        if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 207)) {

            var json = xhr.responseText;
            var o = self.callback[xhr.id];

            if(json.includes('Error:')) {

                // XMLHttpRequest timed out. Do something here.
                if(o.error !== undefined && o.scope !== null) {
                    o.error.call(o.scope, json);
                }

                return;
            }

            self.chagedResult[xhr.id] = json;
            var o = self.callback[xhr.id];
            if(o !== undefined) {
                if(o.callback !== undefined && o.scope !== null) {
                    o.callback.call(o.scope, json);
                }
            }
        }

        //cc.log(xhr.readyState, xhr.status);
    }

    xhr.ontimeout = function (e) {

        var o = self.callback[xhr.id];
        if(o.error !== undefined && o.scope !== null) {
            o.error.call(o.scope, e);
        }
    };

    xhr.addEventListener('error', function(e) {

        var o = self.callback[xhr.id];

        if(o.error !== undefined && o.scope !== null) {
            o.error.call(o.scope, e);
        }
    });

    try {

        xhr.send(formData);
    }
    catch(e) {

        console.warn(e);
    } 

    return xhr.id;
},

the trouble is on Android (I forgot to define it)

Thanks!

#4

Could you try something like below without FormData.

var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);

//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);
#5

we have resolved with GET and convert the binarydata to utf16bytes and after in string (because the binary data break the url)… now we try with POST without formdata how you have suggest, that is the correct system to send data to server. Thanks!

1 Like
#6

Yay! Happy for you. :blush:

#7

OK Works :slight_smile:
To skip use FormData, we have follow this steps:

javascript:

var jdata = {};
jdata.username …
jdata.world …
jdata.data = this.strToUtf16Bytes(data); <---- convert bynary data to arraybytes

var json = JSON.stringify(jdata);

var params = this.CREATE_POST_PARAMETERS(
{
json: json,
}
);

where CREATE_POST_PARAMETERS convert string in format ‘json=…&second:=…’ etc…

POST params

php

$data = $_POST[“json”];
$json = json_decode($data, true);
$newUsername = $json[“username”];
…
$str = call_user_func_array(“pack”, array_merge(array(“C*”), $json[“data”]));
$newPlayerData = iconv(‘utf-16’, ‘utf-8’, $str);

$newPlayerData is the binary data converted from arraybytes

Cheers,

Stefano