How to receive array using AJAX which calls PHP script?

Question

So basically what I'm doing is auto filling a textbox using AJAX to grab information from a PHP script that calls a C function.

This is what I've found in theory: (Assuming receiving only one value)

$(document).ready(function(){
    window.setInterval(function(){
        var ajaxurl = 'php/portserverclient.php',
        $.post(ajaxurl, NULL, function (response) {
            $('#v1').val(response); 
        });
    }, 5000);
});

Now, if this works, which I believe it will. If I receive an array of values, then the input inside of function cannot be response, correct? So what would I have to change it to make it an array?

Just to be clear, my PHP script is using echo to output its information. I'd rather output in such a more "standard" manner as in V1 = 120, V2 = 120, etc. but PHP is new to me and that I am currently researching. Thank you.

EDIT: Just to make it clearer

Would something like this work?

$(document).ready(function(){
    window.setInterval(function(){
        var ajaxurl = 'php/portserverclient.php',
        $.post(ajaxurl, NULL, function (response[]) {
            $('#v1').val(response[0]);
            $('#v2').val(response[1]);
            $('#v3').val(response[2]);
        });
    }, 5000);
});

can you point me into the right direction into what to search to turn the response into an array please? — Rayaarito
– Rayaarito, Commented Aug 9, 2017 at 15:06

Louys Patrice Bessette · Accepted Answer · 2017-08-09 15:15:50Z

2

Since you echo on PHP side, the response just can be a string.
But if that string if formed as a valid JSON, you will be able to use it like you wish.

So on PHP side, make sure the json format is valid:

$array = [120,340,800];

echo json_encode($array);

Then in JS... You received a string... You have to parse it to make it an array.

$(document).ready(function(){
  window.setInterval(function(){
      var ajaxurl = 'php/portserverclient.php',
      $.post(ajaxurl, NULL, function (response[]) {
          var responseArray = JSON.parse(response);
          $('#v1').val(responseArray[0]);
          $('#v2').val(responseArray[1]);
          $('#v3').val(responseArray[2]);
      });
  }, 5000);
});

edited Aug 9, 2017 at 15:15

answered Aug 9, 2017 at 15:09

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kulix · Accepted Answer · 2017-08-09 15:10:19Z

0

Per the OP update, you could try something like this to map each item of the array up to its corresponding text box you could do.

    $.post(ajaxurl, NULL, function (response) {
        for (var i = 0; i < response.length; i++) {
            $("#v" + (i + 1)).val(response[i]);
        }
    });

This would map each index of the array returned from the JSON endpoint, to a corresponding text box.

If the JSON being returned from your endpoint is a valid JSON array, your response variable should already be an array!

edited Aug 9, 2017 at 15:10

answered Aug 9, 2017 at 15:00

Kulix

4744 silver badges12 bronze badges

2 Comments

Rayaarito Over a year ago

Hey! Thank you for the quick response. I edited the OP to make it a little clearer, I have multiple textboxes. V1, V2, V3, etc that I'd like to file. I guess a clearer way of asking what I'm trying to achieve is, how would i turn response inside the .post function into an array?

Kulix Over a year ago

See my update and let me know if you have any questions

charlietfl · Accepted Answer · 2017-08-09 15:20:55Z

0

Send your array as json:

echo json_encode(array($value1, $value2, $value3));

JS

$.post(ajaxurl, NULL, function (response) {
     // selectors in same index order as response array
     $('#v1, #v2, #v3').val(function(i){
       return response[i];
     });         
},'json');

edited Aug 9, 2017 at 15:20

answered Aug 9, 2017 at 15:08

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Mcsky · Accepted Answer · 2017-08-09 15:29:37Z

The easiest way (for me) to communicate between javascript and PHP is JSON. So your PHP script have to generate an answer in this format.

PHP code

// At the top of your PHP script add this
// that will tell to your browser to read the response as JSON
header('Content-Type    : application/json', true); 
// Do your logic to generate a PHP array
echo json_encode($yourArray);

HTML code

<div class="someClass"></div>

Javascript code

var container = $('.someClass');
$.post(ajaxurl, NULL, function (response) {
    console.log(response); // for debuging
    for (let i = 0; i <= response.length; i++) {
        let myItem = response[i];
        container.append('<p>' + item + '</p>');
    }
});

It's cleanest to generate dynamically the p elements because you don't know how many results your PHP file will return you.

I'm not sure of the javascript code, you maybe will received a json string that you have to transform to a Javascript Array

Before link you javascript to php script, try some call with postman (or others http client) to ensure that your 'webservice' is working as excepted

Collectives™ on Stack Overflow

How to receive array using AJAX which calls PHP script?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related