How to send very big amount of data to server using ajax - javascript

I am practicing ajax and want to send big amount of data to server (for instance I want to make tags for a post which can be up to 20 tags). Currently all I do is concatenate each tag with specific symbol between them and then in server I filter it and convert it to many tags again but I don't think that's the natural way. So what is the best way to send say, 30 - 40 entries to server with ajax optimally.
UPDATE (As some of the people suggested I am showing js code example):
$(document).ready(function(){
var tagsToSend = "tag1%tag2%tag3%tag4%tag5%tag6%tag7%tag8%tag9%tag10%tag11%tag12%tag13";
$.ajax({
url: "test.php",
method: "POST",
data: {
tags: tagsToSend
},
success: function(result){
alert(result)
}
});
})
So basically in server I'll just iterate over the given tags string and filter each tag. And I want more natural way.

I think the better way is to sending tags as a json array and not GET parameter. Something like this:
var postData = {};
postData['tagsToSend'] = ["tag1", "tag2", ...];
And inside your ajax config:
data: JSON.stringify(data)
Now, you can get a json in your php file and parse it into php array.
This can help you to have more readable and cleaner request to the server.

Related

Passing an array in JQuery with a POST and reading it with Flask

I try to store the data from a graph with jQuery but I always get a 400 Bad request.
The problem is the data_series variable isnt just an array of integers but much more. This is unchangeable since it is necessary for my chart generation to be like this.
A litle piece of it to show you what I mean:
data_series[0][data][0][]:1389975624000
data_series[0][data][0][]:91
data_series[0][data][1][]:1390003200000
data_series[0][data][1][]:446
data_series[0][data][2][]:1390089600000
data_series[0][data][2][]:429
.....
My Jquery post looks like this,
$.ajax({
url: "{{ url_for('save_graph_to_session') }}",
method: "POST",
data: {
data_series: data_series
},
success: function(data) {
console.log('Saved to session')
}
});
On flask side I read it like this, and put in a session:
#app.route('/save_graph_to_session', methods=[ 'POST'])
def save_graph_to_session():
session['data_series'] = request.form['data_series'];
return "saved"
I've tried to post with 'data_series[]:' data_series, didn't work out either.
EDIT:
Maybe the solution lies within the way to request, so :
Is there a way to request in flask that ignores the fact that this is an array of arrays
this is the way one can do this:
session['data_series'] = request.form.getlist('data_series[]');

How do I pass form data to PHP and return a json string to Javascript?

Does anyone know how pass form values into PHP and still return the data to JavaScript? (For use in Google Charts if anyone is wondering.)
I have an HTML form with 4 radio boxes. I'd like to pass the value of the form so that my PHP request will be modified based on the user's selection.
The results from the PHP request need to be passed to JavaScript for processing.
In the radio button on click event place a javascript function that will perform an XMLHttpRequest to the php page and have the PHP page echo some JSON content that can be decoded in the return of the XHR in Javascript.
Example of such
May this can help you.
I think that you must do an Ajax request
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( data) {
alert( "Data Saved: " + data);
});
You send data to server form your form (here sent are name and location). You read this data with javascript with OnSelect and transfert it to your PHP code and,
You get back data from server into your JavaScript code and you can do what you want with it.
Sorry if my solution use JQuery, it is better for cross-browser with less code writing !
You could use this line to parse an array into json and use it later in javascript:
json_encode($rows); //format array named $rows into json data
More info: http://php.net/manual/en/function.json-encode.php

How to handle massive data with jQuery and PHP via AJAX?

i am passing a huge javascript array to php via the $.ajax method of jquery. The Content-Type is JSON and i sent the data as RAW.
In PHP i get the data with file_get_contents('php://input').
Everything is working very well, but on huge javascript arrays, for example 2,5MB, php receives only the small vars and the huge vars are stripped out. Before i send the data with jquery i do a JSON.stringify to send the data as JSON. PHP still will strip out all huge vars in this JSON string and if i get the contents of "php://input" only the small vars are left over....
In the php.ini i have raised up the max_post_size and other stuff, but nothing will work...
Does anybody know how i can handle this right?
thx!
Probably not the best idea but you could split your data, somthing like (not tested, might need a few corrections):
var json = HUGEJSON;
while (json.length != 0) {
var toSend = json.length >= 4096 ? json.substr(0, 4096) : json;
$.ajax({
url: 'server',
method:'post',
type:'json',
data: toSend
});
json = json.length >= 4096? json.substr(4096, json.length-4096) : json;
}
Then find a way to rebuild the data server side until all the data have been send.

Why should we serialize data before sending in Javascript?

I want to know why we need to serialize a JavaScript Object before sending to the server.
Example:
var send_data= {
id : 10,
name : 20,
school : {
name : "xyz",
location : "some place"
}
}
If I send this data without serializing, using ajax like this
$.ajax({
type: "POST",
url: "some.php",
data: { "info" : send_data}
})
Is there something wrong with this code? Because I can access all the data without unserializing...
$data = $_POST["info"];
echo $data["school"]["name"];
The data MUST be serialized, because network traffic consists of series of bytes. At some point, your data structures must be turned into something that can be sent over a network.
However, jQuery's .ajax() function already does serialization if you use an object instead of a string for its data argument. So no need to do it there.
I don't know PHP well but if the code you have there works, then apparently PHP also automatically unserializes the data.
So I'd say that yes, serializing is necessary, but doing it the way you describe actually does serialize it in the background.

Return String from Cross-domain AJAX Request

I'm looking for a way to return a single JSON/JSONP string from a cross-domain "AJAX" request. Rather than request the string and have JQuery return it as a generic object automatically, I want to get a hold of the string BEFORE that conversion happens. The goal here is to parse it myself so I can turn it straight into new objects of a certain type (e.g. a Person object).
So, just to make this clear, I don't want any string-to-generic-object conversion going on behind the scenes and this must work using a different domain.
Here's a non-working example of what I would like to do:
$.ajax({
type: 'GET',
url: 'http://www.someOtherDomain.com/GetPerson',
dataType: 'text',
success: parseToPerson
});
function parseToPerson( textToParse ) {
// I think I can do this part, I just want to get it working up to this point
}
I'm perfectly happy if JQuery isn't involved in the solution, as long as it works. I would prefer to use JQuery, though. From what I've read, the javascript techniques used to get JSONP data (dynamically creating a script element) would probably work, but I can't seem to get that to work for me. I control the domain that I am requesting data from and I can get the data if I change the dataType in the AJAX call to 'JSONP', so I know that is working.
If your data is being retrieved from another domain, you will need to use JSONP (there are other options, but JSONP is by far the easiest if you control the service). The jQuery call will look like this:
$.ajax({
// type: 'GET', --> this is the default, you don't need this line
url: 'http://www.someOtherDomain.com/GetPerson',
dataType: 'jsonp',
success: parseToPerson
});
The actual request that goes to your service will be http://www.someOtherDomain.com/GetPerson?callback=arbitrary_function_name. On the service side, you will need to return data like this:
arbitrary_function_name("the string (or JSON data) that I want to return");
So you'll need to inspect the querystring parameters, get the value of the callback parameter, and echo it out as if you're calling a Javascript function with that name (which you are), passing in the value you want to provide through the service. Your success function will then get called with the data your service provided.
If you're deserializing the returned data into a Javascript object, you might be better off returning JSON data than a string, so the data your service returns might look like this:
arbitrary_function_name({
"name":"Bob Person",
"age":27,
"etc":"More data"
});
That way you don't have to worry about parsing the string - it'll already be in a Javascript object that's easy to use to initialize your object.
Not sure how this will work in conjuction with jsonp, but maybe converters is what you're looking for?
$.ajax(url, {
dataType: "person",
converters: {
"text person": function(textValue) {
return parseToPerson(textValue);
}
}
});

Categories