How do I post an array and loop through it using php?

Question

I have an input field and when the user is typing something in, it immediately creates an array using jQuery replace function. The target is to send those values to PHP and perform a live search on a specific table in MySQL.

I got the part of the input field and the ajax call, but I do not get the portion of the php loop done so far.

My target is to send this array serialized to php and use each item as variable.

This is my jQuery and HTML fiddle .

This is my code:

HTML:

<div class="container-fluid" style="margin-top:10px;">
  <div class="row" style="padding:10px;">
    <input class="form-control" id="Input">
  </div>
  <div class="row">
    <div class="container rounded" id="smd" style="background-color:red; height:100px;display:none;">
<span>Search Results here</span>
    </div>
  </div>
</div>

jQuery:

 $("#Input").keyup(function() {
  var div = $('#smd');
  if ($("#Input").val().length > 0) {
    div.show();
    var source = $("#Input").val();
    var splittedSource = source.replace(/\s{2,}/g, ' ').split(' ');
    $.post('/url/to/page', splittedSource);

    console.log(splittedSource);
  } else {
    div.hide();
  }
});

This is how my string looks like:

["This", "is", "my", "string"]

0:"This"
1:"is"
2:"my"
3:"string"

Answer 1

You either need to send as key/value pair or send and receive as application/json .

Right now you are only sending a value without a key that can be indexed by $_POST

Try

$.post('/url/to/page',{arr: splittedSource});

And in php

$arr = $_POST['arr'];//php array

To do it as json:

$.ajax({
   url: '/url/to/page',
   contentType:'application/json',
   data: JSON.stringify(splittedSource)
   // other options
});
//php
$arr = json_decode(file_get_contents('php://input'),true);

Answer 2

While I have the feeling that you could (or even should) handle such logic in your back end code, you might want to take a look at the manual on how to use arrays in a form

This suggests that you should use a name that ends in [] . Since posting a form is simply using the application/x-www-form-urlencoded enctype by default, you can simply put the value myarray[]=a&myarray[]=b ... etc in the request body and PHP will interpret it as the array value $_POST['myarray'] .

Answer 3

this is common format

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

you need to send correct format like

$.post( "test.php", { name: "John", time: "2pm" } );

so your code need to update

$.post('/url/to/page', splittedSource); 

to

$.post('/url/to/page',{data: splittedSource});

so you can get data using

<?php
$data = $_POST['data'];

you can use this also format

$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

for more information about ajax post

https://api.jquery.com/jquery.post/