Develop Reference

Cant send Data in AJAX call by using post method

here is my code, its pretty simple and works perfect:
var r = new XMLHttpRequest();
var name='KillerSeba';
r.open("GET","../Serve/servepage.php?name="+name,true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
alert("Success: " + r.responseText);
};
r.send();
This code just sends alert "Success: KillerSeba" when page loads. And my php file which answers request looks kinda of:
<?php
$s=$_REQUEST['name'];
echo $s;
?>
Then i want to use POST method instead of GET one. In order to do this, I change "GET" to "POST", changing url to php file, then add name variable to send() function, so my javascript code look like this:
var r = new XMLHttpRequest();
var name='KillerSeba';
r.open("POST","../Serve/servepage.php",true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
alert("Success: " + r.responseText);
};
r.send(name);
But now script doesnt send any Data to php file, cuz i getting only "Success:" alert. KillerSeba dissipates to somewhere. I tried to use 'name' and "name" instead of name inside of send() function, i tried to replace $_REQUEST by $_POST, but it still doesnt help. So my Queistion is: How to send Data in AJAX Request using POST method? How does this send() function work?
P.S. I prefer to use Vanilla JS Framework only.

As you're sending the name as string without any paramerter name that's why it is not working for you with POST method but when you're sending with GET you're concatenating that name with the url. Now, you've to pass the params the same way you sent with GET method. Just try like this way, I just wrap the name to a variable called params that contains the params = 'name='+name; so you've to send it with your r.send(params). See the examples here both for GET and POST
var r = new XMLHttpRequest();
var name='KillerSeba';
r.open("POST","../Serve/servepage.php",true);
//Send the proper header information along with the request
r.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
alert("Success: " + r.responseText);
};
params = 'name='+name;
r.send(params);

You are sending name but without any variable name (it's considered as variable name without any value).
Change your r.send(name); to r.send('name=' + name);.
For more information, take a look at the MDN Web Docs
EDIT: Thanks for your hint, of course you need to set a proper header before sending the request:
r.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

special chars are corrupted while sending the request result to another php page for debug

i am trying to create a script that gets the requests in the network tab and sends it to a debug page ,the requests are aes-128-cbc encrypted but they are RAW not base64 so some special chars exist,the problem is that special chars are somehow sent corrupted to the debug page.
for example:
"A test" (without the quotes) is encrypted with
key test1234
and iv 1235569767556087
using the php code
openssl_encrypt("A test",'aes-128-cbc',"test1234",OPENSSL_RAW_DATA,"1235569767556087");
gave the following result : ��)���,�AM9�,�
which is represented in an integer array as
[191,242,41,173,235,176,231,44,232,65,77,2,57,170,44,175]
when the encrypted string is sent to the debug page it becomes as following
[239,191,189,239,191,189,41,239,191,189,239,191,189,239,191,189,44,239,191,189,65,77,2,57,239,191,189,44,239,191,189]
as you can notice each � is represented by 3 bytes (239,191,189) instead of the actual byte
i use google chrome and the js code is as the following:
var SendDebugRequest = function(url,posted_data,callback){
var xhr = new XMLHttpRequest();
xhr.open('POST', "http://127.0.0.1/debug.php", true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response,xhr.responseURL);
} else {
callback(status, xhr.response,xhr.responseURL);
}
};
xhr.send(posted_data);}
Promise.all(UI.panels.network._networkLogView._dataGrid._rootNode._flatNodes.map( function(node){
var temp = [];
temp[1] = node._request._requestHeaders;
node._request._requestFormDataPromise.then(function(data) { temp[0] = data;});
node._request.contentData().then(function(data) { temp[2] = data.content;});
return temp;})).then(function(daata){
var posted_data = "encrypted_text=" + encodeURIComponent(daata[0][2]) + "&form_data=" + encodeURIComponent(daata[0][0]) ;
SendDebugRequest('',posted_data,function (status,response,resp_url){});});
so any idea about how can i solve the problem?
thanks in advance
EDIT:
as suggested in the comment , i tried using FormData instead of encodeURIComponent but also gave the same result
i changed
var posted_data = "encrypted_text=" + encodeURIComponent(daata[0][2]) + "&form_data=" + encodeURIComponent(daata[0][0]) ;
SendDebugRequest('',posted_data,function (status,response,resp_url){});});
to
var formData = new FormData();
var encrypted_text = new Blob([daata[0][2]], { type: "application/octet-stream"});
formData.append('encrypted_text', encrypted_text);
formData.append('form_data', daata[0][0]);
SendDebugRequest('',formData,function (status,response,resp_url){});
and removed the line
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
EDIT 2 :
The problem is due to chrome giving the text response instead of the actual raw hex response , do you have any idea about how can i achieve this? searching yielded no results , i don't mind using an extension as long as i can send the data to the debug page

$_GET variable not showing up in string and boolean operations

I have a javascript file that uses POST to send some data to a PHP file, as such:
var additional = "Feb2015";
xmlhttp.open("POST", "database_comm_general.php?query=" + additional, true);
In the PHP file, I use $_GET to get that 'additional' variable:
$query = $_GET['query'];
Now, if I want to use it to get some data from MySql, I use this for my query, but when I echo it, it just shows empty quotation marks, where 'Feb2015' should be:
$sql_query = "SELECT * FROM '" . $query . "'";
Output: "SELECT * FROM ''"
Even more odd, if I use json_encode and print it on the javascript side, it shows up just fine.
Similarly, if I see if the variable equals 'Feb2015', with json_encode it will return true, but on the page it will output false at the same time.
Any ideas?
Edit:
This is my javascript code:
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var content = JSON.parse(this.responseText);
window.alert(content);}}
xmlhttp.open("POST", "database_comm_general.php?query=" + additional, true);
xmlhttp.send();

Alright, I haven't been able to fix this exact issue, but I got my code working through other means:
First, I use jquery instead of javascript for communicating with PHP:
text = "Feb2015";
$.ajax(
{ url : "database_comm_general.php?" + text, success: function(data){
var return_data = JSON.parse(data);
populateTableList(return_data);
}});
Second, in the PHP file, I don't use $_GET, I get the data from the link address:
$link = $_SERVER[REQUEST_URI];
$index = strpos($link, "?");
$sub_string = substr($link, $index+1, 7);
$sub_string = $sub_string;
Third, I added a single line of code in the MySQL code that resolved the issues with some of the arrays which couldn't be encoded:
mysqli_set_charset($conn, 'utf8');
All in all, I feel I've been to hell and back, but I hope this helps someone in the future.

Using XMLHttpRequest() PUT with GAE Python

I am currently trying to write some Javascript to interact with an API that I deployed on GAE (using Python) using XMXMLHttpRequest(). I've had no issue getting a GET, however the PUT is giving me a lot of trouble.
Interestingly, I have no issue touching the PUT request from a test HTTP site (https://www.hurl.it/), however I receive a status value of 0 every time I try from my own Javascript code. Below are snippets of my GAE and Javascript code.
(NOTE - I must use a "put" for this call as a requirement.)
Any guidance would be appreciated!
GAE (Server):
def put(self):
# Save variables for update
cardkey = self.request.get('key', default_value=None)
ident = self.request.get('ident', default_value=None)
brand = self.request.get('brand', default_value=None)
year = self.request.get('year', default_value=None)
player = self.request.get('player', default_value=None)
# If card key is provided then update card
if cardkey:
# Get card
card_to_update = ndb.Key(db_models.Card, int(cardkey)).get()
if ident:
card_to_update.ident = ident
if brand:
card_to_update.brand = brand
if year:
card_to_update.year = year
if player:
card_to_update.player = player
# Save changes and print update to requester
card_to_update.put()
card_dict_format = card_to_update.to_dict()
self.response.write(json.dumps(card_dict_format))
return
# If card key is not provided send error
else:
self.response.write('key not provided. must provide key for update.')
return
And the Javascript from my webpage:
<script>
window.onload = function()
{
var myRequest = new XMLHttpRequest();
var url = 'http://cs496-assignment3-mastrokn.appspot.com/updatecard';
var param = 'key=5636318331666432';
myRequest.open('put', url);
myRequest.onreadystatechange = function()
{
if ((myRequest.readyState == 4) && (myRequest.status == 200))
{
// var myArr = JSON.parse(myRequst.responseText);
// myFunction(myArr);
document.getElementById("viewCards").innerHTML = myRequest.status;
}
else
{
document.getElementById("viewCards").innerHTML = myRequest.status;
}
}
myRequest.send(param);
}
</script>

First, your onreadystatechange() handler should look like this:
myRequest.onreadystatechange = function()
{
if (myRequest.readyState == 4) //Don't do anything until the readyState==4
{
if(myRequest.status == 200) //Check for status==200
{
document.getElementById("viewCards").innerHTML = myRequest.status;
}
else //All other status codes
{
document.getElementById("viewCards").innerHTML =
'readyState='
+ myRequest.readyState
+ ' status='
+ myRequest.status
+ ' status text='
+ myRequest.statusText;
}
}
}
Then, from the docs:
If you end up with an XMLHttpRequest having status=0 and
statusText=null, it means that the request was not allowed to be
performed. It was UNSENT.
To see what went wrong, check the javascript console in your browser for an error, e.g.:
[Error] XMLHttpRequest cannot load
http://cs496-assignment3-mastrokn.appspot.com/updatecard. Origin
http://localhost:4567 is not allowed by Access-Control-Allow-Origin.
(4.htm, line 0)
When I run the code above and send the XMLHttpRequest to my own local server, the PUT request succeeds with a status code of 200.
Lastly, I have doubts about the server code you posted because I don't know of any framework where you return None from a request handler--rather you return some string or a response object. Yet, using other means to make a PUT request to your url returns a 200 status code. Is that really your server code? What framework are you using?

Using webpy with AJAX

I am relatively new to web development and am trying to get the client javascript to send GET requests to a python script running on the server and the server to return data based on that request. I have tried adapting the examples of the webpy library I found online to no avail. Whenever a GET request is sent, the responseText attribute of XMLHttpRequest() returns the text of the python file rather than the data. Any advise would be much appreciated!
The javascript function:
function sendSerialCommand(selection, command) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
if (command !== 5) {
document.getElementById("output2").innerHTML = xmlhttp.responseText;
document.getElementById("output2").style.color = "green";
} else {
document.getElementById("output1").innerHTML = xmlhttp.responseText;
console.log(xmlhttp.responseText);
document.getElementById("output1").style.color = "green";
}
}
};
xmlhttp.open("GET", pythonFileName + "?sel=" + selection + "?cmd=" + command, true);
xmlhttp.send();
}
...and the test python script:
import web
urls = (
'/', 'Index'
)
app = web.application(urls,globals())
#MAIN LOOP
class Index:
def GET(self):
webInput = web.input()
return 'message: GET OK!'
if __name__ == "__main__":
app.run()

The trick was to use the CGI library for python as such:
#!/usr/bin/python
# Import modules for CGI handling
import cgi, cgitb
# Create instance of FieldStorage
form = cgi.FieldStorage()
# Get data from fields
first_name = form.getvalue('cmd')
last_name = form.getvalue('sel')
print "Content-type:text/html\r\n\r\n"
print "Hello %s %s" % (first_name, last_name)
This captures the keys and data from the GET request and the print command returns data to the xmlhttp.responseText attribute on the client-side.
The script has to be placed into a file the websever is able to execute the script from. That is usually the default /cgi-bin folder located in either /var/www or /etc.