how to pass array from html to php using ajax

Question

I try to pass array using jquery by ajax and back but my code not working well. I all the time change it but it is not working. please advise what to do. I think my jquery code is ok but php code not replay. thx.

html code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" >
$(document).ready(function(){
    var allVals = { 
              'a': '1', 
              'b': '2',
              'c': '3' 
            }; 
            //$.each(allVals, function(key, value) { 
              //alert(key + ': ' + value); 
                //  });
            });
$.ajax({
    type: "POST",
     dataType: 'html',
     url: "test4.php",
     data: 'allVals=' + allVals,
         cache: false,
         success: function(data)
         {
            alert(data);
            $('#test').html(data);
            }
         });
</script>

<title>Insert title here</title>
</head>
<body>
<div id="test">##</div>
</body>
</html>

php code test4.php

<?php
    $allVals = $_POST['allVals'];
    if ($allVals != ""){
          foreach ($allVals as $key => $value) {
          echo ($key.' '.$value."<br />");
    }     }

?>

Do you get your success alert? Everything looks okay at first glimpse. — Christoph
– Christoph, Commented Jun 5, 2012 at 7:35
what should i write instad data: 'allVals=' + allVals, what you offer ? — yossi
– yossi, Commented Jun 5, 2012 at 7:40

Lawrence Cherone · Accepted Answer · 2012-06-05 07:54:54Z

You can also send an array to PHP from jQuery like this. In your example your sending an object:

<?php 
if($_SERVER['REQUEST_METHOD']=='POST'){
    header('Content-Type: text/html');
    print_r($_POST['allVals']);
    /*
    Array ( [0] => 1 [1] => 2 [2] => 3 ) 
    */
    die;
}
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {

    var myJavascriptArray = new Array('1', '2', '3');
    //or var myJavascriptArray=["1","2","3"]; 

    $.ajax({
        type: "POST",
        dataType: 'html',
        url: "test.php",
        data: {'allVals[]=' : myJavascriptArray},
        cache: false,
        success: function(data){
            $('#test').html(data);
        }
    });

});
</script>

</head>

<body>
<div id="test"></div>
</body>
</html>

dda · Accepted Answer · 2012-06-05 07:54:48Z

1

You are doing the $.ajax-call outside the $(document).ready(...-scope. Move it inside!

I would do this part

data: 'allVals=' + allVals

like so:

data: allVals

And if you want to receive it as you do in php, change it to:

data: {"allVals": allVals}

Hope I got the syntax correctly.. ;)

edited Jun 5, 2012 at 7:54

dda

6,2212 gold badges27 silver badges37 bronze badges

answered Jun 5, 2012 at 7:43

Gustav

1,3411 gold badge12 silver badges24 bronze badges

4 Comments

yossi Over a year ago

I think data: 'allVals=' + allVals, equal to data: {"allVals": allVals}

Gustav Over a year ago

yossi, you are doing the $.ajax-call outside the $(document).ready(...-scope move it inside!

yossi Over a year ago

You right I do mistake $.ajax-call outside . but it still not working

ianace Over a year ago

yoss, data: 'allVals=' + allVals produces [allVals] => [object Object]

ianace · Accepted Answer · 2012-06-05 07:41:30Z

0

data: 'allVals=' + allVals,

this is the culprit, what gets sent is allvals[object Object]

answered Jun 5, 2012 at 7:41

ianace

1,6352 gold badges17 silver badges32 bronze badges

2 Comments

ianace Over a year ago

you are treating object allvals as a string with 'allVals=' + allVals , thus allVals is convert into [object Object] so 'allVals=' + allVals is allvals[object Object]

yossi Over a year ago

by changing data: "allVals=" + allVals, to data: "allVals[]=" + allVals, and changing

<?php     $allVals = $_POST['allVals'];     if ($allVals != ""){           foreach ($allVals as $key => $value) {           echo ($key.' '.$value."<br />");     }     }  ?>

I got success but the out put was Array ( [0] => [object Object] ) It is mean that the array sent as empty ?

jbrtrnd · Accepted Answer · 2012-06-05 07:48:02Z

0

If you need a php array, I advise you to do like this :

data: {allVals : allVals}

The $_POST['allVals'] will contains an array.

Otherwise, If you only need single parameters you have to do as follows :

var stringToSend = sep = "";
$.each(allVals, function(key, value) { 
    stringToSend += sep+key+"="+value;
    sep = "&";          
});
$.ajax({
type: "POST",
 dataType: 'html',
 url: "test4.php",
 data: stringToSend,
 ...

answered Jun 5, 2012 at 7:48

jbrtrnd

3,8435 gold badges26 silver badges41 bronze badges

Comments

Zuul · Accepted Answer · 2012-06-05 07:51:25Z

0

You would be better using jQuery $.POST method:

var javascriptArray = new Array('a', 'b', 'c');

$.post('url_to_test4.php', {'allVals[]': javascriptArray }, function(data){
   // perform some action with the response data.
});

This will send to the PHP file an array named allVals, that will have the contents of your javascriptArray.

answered Jun 5, 2012 at 7:51

Zuul

16.3k6 gold badges63 silver badges88 bronze badges

Collectives™ on Stack Overflow

how to pass array from html to php using ajax

5 Answers 5

Comments

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related