CODEWITHSUNDEEP
javascriptphpjqueryajaxautocomplete
Rayaarito
Rayaarito

Reputation: 410

How to receive array using AJAX which calls PHP script?

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);
});

Upvotes: 1

Views: 756

Answers (4)

Mcsky
Mcsky

Reputation: 1445

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

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

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');

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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);
});

Upvotes: 2

Kulix
Kulix

Reputation: 474

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!

Upvotes: 0

Related Questions