jQuery AJAX POST request error passing values

Question

I have two simple php pages:

notification.php

<html>
<head><title></title>
<meta charset="UTF-8">
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head >
<body>
<script language="JavaScript" >
function gotData(data) {

               var toSave = "token=22"; //just a try not a real token
               toSave +="&";
               var allPropertyNames = Object.keys(data);
               var SIZEITEM = allPropertyNames.length;
               for (var j=0; j<SIZEITEM; j++) {
                   var name = allPropertyNames[j];
                   var value = data[name];
                   toSave +=name+"="+value;
                   if(j < SIZEITEM-1)
                       toSave +="&";
               }
                console.log(toSave);
              $.ajax({
                   url : "notification_okvalue.php",
                   type: "POST",
                   dataType : 'text',
                   data : {toSave:toSave},
                   success : function(sended) {
                       console.log("sucessfull sending:")
                       console.log(sended);
                   },
                   error : function() {
                       console.log('failed');
                   }

               });
           }
       </script>
       <script src="https://MYFIREBASE.firebaseio.com/chats/-KF4foKsJxIFbLEVxdNC/group.json?callback=gotData"></script>
</body>

</html>

And notification_okvalue.php

<html>
<head>
<title></title>

</head>
<body>

<script language="JavaScript">
    var ref = new Firebase("https://MYFIREBASE.firebaseio.com/");
    ref.child("prova").set(
        {
         all_ok:"<?php echo $_POST["token"];?>";   
        });

</script>
</body>
</html>

The console give me the successful sending string and the console.log(toSave) give me the right string

token=22&-KF4foL4E4E2V4oPU-cI=-KF4fi_gWTE4MQ5Bqskw&-KF4foL7g09NGKnQbouU=-KF4fJpvZC6LgbltEesZ

But when the call pass the entire code as POST indeed the console.log(sended) return me the entire notification_okvalue.php code

And of course I receive the error in notification_okvalue.php that $_POST["token"] is not setted

EDIT For be more specific, I don't actually need the response of the notification_okvalue.php but what I need is that, all the $_POST value passed must be stored in Firebase. So what I need is the Firebase writes.

Remove dataType : 'text' or change 'text' to json or whatever you are returning. — Webice, Apr 13 '16 at 12:22
I'm returning the string you can read above `token=22&-KF4foL4E4E2V4oPU-cI=-KF4fi_gWTE4MQ5Bqskw&-KF4foL7g09NGKnQbouU=-KF4fJpvZC6LgbltEesZ`, I tried to remove dataType, and also change to json. When I remove it, the result is the same, with json the call fails — Alfox, Apr 13 '16 at 12:58
I think your toSave is formatted as a querystring and [that's wrong](http://stackoverflow.com/questions/5876809/do-http-post-methods-send-data-as-a-querystring). Make a JSON object instead: `{'token':22, //etc... }` — KWeiss, Apr 13 '16 at 13:18

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

I think structuring your POST data as a querystring is wrong here. Compare this question.

You may have more success if you just use your data object:

var postData = data;
postData.token = 22;

And then in your $.post:

data: postData

That way the token should arrive correctly. You probably will still get the whole of the notification_okvalue.php as a response, though.

edited May 23 '17 at 10:33

Community

1
1

answered Apr 13 '16 at 13:31

KWeiss

2,954
3
21
37

Matt · Answer 2 · 2016-04-13T13:39:47.360

An AJAX request is nothing but a hidden classic client request. This means that it cannot get anything more or less than what you could get by loading the page with your browser. The data being retrieved is the raw code returned by the server at the given URL, including HTML and any other kind of code that was put there.

If you want to make an efficient system using, for instance, a JSON structure (which will allow you to simplify the post-request data treatment), the server must return a blank page containing nothing but JSON code after setting the content-type header. For instance, if your server runs PHP code :

header('Content-Type: application/json');
echo json_encode(array('foo' => 'bar')); // output : {"foo": "bar"}, which is correct JSON format

The actual return is a string that has to be parsed in your JS code to be interpreted correctly (this work is done by default by jQuery if proper request parameters are set so), but it can be any other format jQuery accepts. See $.ajax's dataType parameter's doc for more details.

The other - less pleasant - solution is to work on your post-request data treatment (code in success function), and fetch by sophisticated means the part of the information you're really looking for. I would not recommend it as notification_okvalue.php outputs no actual HTML. It would be pretty quick in your current situation to implement a robust system as described above. There's no need bothering navigate into an empty HTML structure.

Thanks for your reply, I updated my question, added an EDIT, to be more specific on what I need. — Alfox, Apr 13 '16 at 14:14

score 0 · Answer 3 · answered Apr 13 '16 at 13:44

your notification_okvalue.php doesn't flush anything on response, that is why the response is showing the whole php code, if your intention is to write the token on the response, you should have simplified your notification_okvalue.php code to contain nothing else but only the line below:

<?php echo $_POST["token"];?>

jQuery AJAX POST request error passing values

3 Answers3