Is it possible to submit array to AJAX via JavaScript?

Question

I have:

...
<script>
function test(){
    var pageName="TestArray.php";
    var text="numbers";
    var array=['one','two'];
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    };
    xmlhttp.open("GET", pageName+"?text="+text+"&array[]=["+array+"]");
    xmlhttp.send();
 }
 test();

</script>
...

In TestArray.php,

<?php
    $response="";
    $numbers="";
    if(isset($_GET["text"])){
        $numbers=$_GET["text"];
        $response="numbers=".$numbers."&";
    }
    if(!empty($_GET["array"])){
        foreach($_GET["array"] as $checkedItem){
            $response.=$checkedItem."&";
        }
        $response=substr($response,0,strlen($response)-1);
    }
    echo $response;
?>

It should alert 'numbers=numbers&one&two'. How to make foreach($_GET["array"]){...} work by deciding what to write after text="+text+ ?

You can pass array into a querystring but not like this. I would need to be like ?array[]=this&array[]=is&array[]=test — Bergur
– Bergur, Commented May 10, 2017 at 23:12
That usually means a syntax error in the PHP script. Check the server error log for the details. — Barmar
– Barmar, Commented May 10, 2017 at 23:28

synthet1c · Accepted Answer · 2017-05-11 00:34:25Z

1

As the previous answer states, you will need to parameterize the array into a url string.

If you will have to repeatedly create url strings you could use a function to convert an object to a URL parameter string.

const es6parameterize = obj => 
  Object.keys(obj).map(k => 
    Array.isArray(obj[k]) 
      ? obj[k].map(x => `${k}[]=${x}`).join('&')
      : `${k}=${obj[k]}`
  ).join('&')


function es5parameterize(obj) {
  var ret = []
  for (var k in obj) {
    if (obj[k].constructor === Array) {
      [].push.apply(ret, obj[k].map(function(x) { return k + '[]=' + x }))
    }
    else {
      ret.push(k + '=' + obj[k])
    }
  }
  return ret.join('&')
}

console.log(
  "pageName?" + es6parameterize({ text: 'foo', array: ['bar', 'baz'] })
)

console.log(
  "pageName?" + es5parameterize({ text: 'foo', array: ['bar', 'baz'] })
)

answered May 11, 2017 at 0:34

synthet1c

6,3024 gold badges28 silver badges41 bronze badges

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

Comments

Barmar · Accepted Answer · 2017-05-10 23:35:08Z

0

You should change this

  xmlhttp.open("GET", pageName+"?text="+text+"&array[]=["+array+"]");

To this:

xmlhttp.open("GET", pageName+"?text="+text+"&array[]="+array[0]+"&array[]="+array [1]);

edited May 10, 2017 at 23:35

Barmar

789k57 gold badges554 silver badges669 bronze badges

answered May 10, 2017 at 23:29

Bilel Korbosli

928 bronze badges

Collectives™ on Stack Overflow

Is it possible to submit array to AJAX via JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related