Send JSON data from Javascript to PHP

Question

How can I send JSON data from Javascript in the browser  to a server and have PHP parse it there

User · Answer

There are 3 relevant ways to send Data from client Side (HTML, Javascript, Vbscript ..etc) to Server Side (PHP, ASP, JSP ...etc)

1. HTML form Posting Request (GET or POST).
2. AJAX (This also comes under GET and POST)
3. Cookie

HTML form Posting Request (GET or POST)

This is most commonly used method, and we can send more Data through this method

AJAX

This is Asynchronous method and this has to work with secure way, here also we can send more Data.

Cookie

This is nice way to use small amount of insensitive data. this is the best way to work with bit of data.

In your case You can prefer HTML form post or AJAX. But before sending to server validate your json by yourself or use link like http://jsonlint.com/

If you have Json Object convert it into String using JSON.stringify(object), If you have JSON string send it as it is.

User · Answer

This is a summary of the main solutions with easy-to-reproduce code  Method 1  application json or text plain   JSON stringify  var data    foo   blah  quot   quot    bar  123   var xhr   new XMLHttpRequest    xhr open  quot POST quot    quot test php quot    xhr onreadystatechange   function     if  xhr readyState     4  amp  amp  xhr status     200    console log xhr responseText       xhr setRequestHeader  quot Content-type quot    quot application json quot      or  quot text plain quot  xhr send JSON stringify data      PHP side  you can get the data with  print r json decode file get contents  php   input    true     Method 2  x-www-form-urlencoded   JSON stringify  var data    foo   blah  quot   quot    bar  123   var xhr   new XMLHttpRequest    xhr open  quot POST quot    quot test php quot    xhr onreadystatechange   function     if  xhr readyState     4  amp  amp  xhr status     200    console log xhr responseText       xhr setRequestHeader  quot Content-type quot    quot application x-www-form-urlencoded quot    xhr send  quot json  quot    encodeURIComponent JSON stringify data       Note  encodeURIComponent      is needed for example if the JSON contains  amp  character  PHP side  you can get the data with  print r json decode   POST  json    true     Method 3  x-www-form-urlencoded   URLSearchParams  var data    foo   blah  quot   quot    bar  123   var xhr   new XMLHttpRequest    xhr open  quot POST quot    quot test php quot    xhr onreadystatechange   function     if  xhr readyState     4  amp  amp  xhr status     200    console log xhr responseText       xhr setRequestHeader  quot Content-type quot    quot application x-www-form-urlencoded quot    xhr send new URLSearchParams data  toString       PHP side  you can get the data with  print r   POST    Note  https   caniuse com  search URLSearchParams

User · Answer

lt html gt   lt script type  text javascript  gt  var myJSONObject     bindings   11   alert myJSONObject    var stringJson  JSON stringify myJSONObject   alert stringJson    lt  script gt   lt  html gt

User · Answer

Simple example on JavaScript for HTML input-fields  sending to server JSON  parsing JSON in PHP and sending back to client  using AJAX    lt  DOCTYPE html gt   lt html gt   lt head lang  en  gt       lt meta charset  UTF-8  gt   lt  head gt   lt script src  https   ajax googleapis com ajax libs jquery 1 11 2 jquery min js  gt  lt  script gt   lt body gt   lt div align  center  gt       lt label for  LName  gt Last Name lt  label gt       lt input type  text  class  form-control  name  LName  id  LName  maxlength  15             placeholder  Last name   gt   lt  div gt   lt br  gt    lt div align  center  gt       lt label for  Age  gt Age lt  label gt       lt input type  text  class  form-control  name  Age  id  Age  maxlength  3             placeholder  Age   gt   lt  div gt   lt br  gt    lt div align  center  gt       lt button type  submit  name  submit show  id  submit show  value  show  onclick  actionSend    gt Show      lt  button gt   lt  div gt    lt div id  result  gt   lt  div gt    lt script gt      var xmlhttp       function actionSend             if  window XMLHttpRequest      code for IE7   Firefox  Chrome  Opera  Safari             xmlhttp   new XMLHttpRequest                      else     code for IE6  IE5             xmlhttp   new ActiveXObject  Microsoft XMLHTTP                      var values      input   map function                  return   this  val               get            var myJsonString   JSON stringify values           xmlhttp onreadystatechange   respond          xmlhttp open  POST    ajax-test php   true           xmlhttp send myJsonString              function respond             if  xmlhttp readyState    4  amp  amp  xmlhttp status    200                document getElementById  result   innerHTML   xmlhttp responseText                    lt  script gt    lt  body gt   lt  html gt    PHP file ajax-test php     lt  php   str json   file get contents  php   input         POST doesn t work here   response   json decode  str json  true      decoding received JSON to array   lName    response 0    age    response 1    echo    lt div align  center  gt   lt h5 gt  Received data   lt  h5 gt   lt table border  1  style  border-collapse  collapse   gt    lt tr gt   lt th gt  First Name lt  th gt   lt th gt  Age lt  th gt   lt  tr gt    lt tr gt    lt td gt   lt center gt     lName   lt center gt  lt  td gt    lt td gt   lt center gt     age   lt  center gt  lt  td gt    lt  tr gt    lt  table gt  lt  div gt        gt

User · Answer

You can easily convert object into urlencoded string   function objToUrlEncode obj  keys        let str           keys   keys            for  let key in obj            keys push key           if  typeof  obj key        object                 str    objToUrlEncode obj key   keys             else               for  let i in keys                    if  i    0  str    keys 0                   else str        keys i                               str        obj key   amp                keys pop                        return str     console log objToUrlEncode   key   value   obj    obj key   obj value             key value amp obj obj key  obj value amp

User · Answer

PHP has a built in function called json decode    Just pass the JSON string into this function and it will convert it to the PHP equivalent string  array or object   In order to pass it as a string from Javascript  you can convert it to JSON using  JSON stringify object     or a library such as Prototype

User · Answer

I found easy way to do but I know it not perfect  1 assign json to   if you JSON is   var data          key 1 n   Eve         key 2 n  Mom         in ---main php ----       lt form action  second php  method  get   gt                   lt input name  data  type  text  id  data  style  display none   gt                   lt input id  submit  type  submit   style  display none   gt         lt  form gt        lt script gt         var data              key 1 n   Eve             key 2 n  Mom              function setInput data            var input   document getElementById  data             input value   JSON stringify data           var submit  document getElementById  submit              to submit and goto second page         submit click                  call function    setInput data         lt  script gt    in ------ second php  -----       lt script gt   printJson     function printJson     var data   getUrlVars    data       decode uri to normal character data    decodeURI data     for special character            amp          data    decodeURIComponent data     remove        at first and last in string before parse string to JSON data   data slice 1 -1   data   JSON parse data   alert JSON stringify data          read get variable form url   credit http   papermashup com read-url-get-variables-withjavascript  function getUrlVars     var vars       var parts   window location href replace     amp        amp         amp     gi  function m key value    vars key    value      return vars      lt  script gt

User · Answer

Javascript file using jQuery  cleaner but library overhead      ajax       type   POST       url   process php       data   json  JSON stringify json data        dataType   json        PHP file  process php    directions   json decode   POST  json     var dump directions     Note that if you use callback functions in your javascript     ajax       type   POST       url   process php       data   json  JSON stringify json data        dataType   json      done  function  data         console log  done        console log data       fail  function  data         console log  fail        console log data         You must  in your PHP file  return a JSON object  in javascript formatting   in order to get a  done success  outcome in your Javascript code  At a minimum return print   print          See Ajax request return 200 OK but error event is fired instead of success  Although for anything a bit more serious you should be sending back a proper header explicitly with the appropriate response code

User · Answer

using JSON stringify yourObj  or Object toJSON yourObj  last one is for using prototype js  then send it using whatever you want  ajax or submit  and you use  as suggested  json decode   http   www php net manual en function json-decode php   to parse it in php  And then you can use it as an array

User · Answer

I ve gotten lots of information here so I wanted to post a solution I discovered   The problem  Getting JSON data from Javascript on the browser  to the server  and having PHP successfully parse it   Environment  Javascript in a browser  Firefox  on Windows  LAMP server as remote server  PHP 5 3 2 on Ubuntu   What works  version 1   1  JSON is just text  Text in a certain format  but just a text string   2  In Javascript  var str json   JSON stringify myObject  gives me the JSON string  3  I use the AJAX XMLHttpRequest object in Javascript to send data to the server   request  new XMLHttpRequest   request open  POST    JSON Handler php   true  request setRequestHeader  Content-type    application json   request send str json       code to display response        4  On the server  PHP code to read the JSON string    str json   file get contents  php   input      This reads the raw POST data   str json now contains the exact JSON string from the browser   What works  version 2   1  If I want to use the  application x-www-form-urlencoded  request header  I need to create a standard POST string of  x y amp a b etc   so that when PHP gets it  it can put it in the   POST associative array  So  in Javascript in the browser   var str json    json string      JSON stringify myObject     PHP will now be able to populate the   POST array when I send str json via AJAX XMLHttpRequest as in version 1 above  Displaying the contents of   POST  json string   will display the JSON string  Using json decode   on the   POST array element with the json string will correctly decode that data and put it in an array object   The pitfall I ran into  Initially  I tried to send the JSON string with the header of application x-www-form-urlencoded and then tried to immediately read it out of the   POST array in PHP  The   POST array was always empty  That s because it is expecting data of the form yval xval amp  rinse and repeat   It found no such data  only the JSON string  and it simply threw it away  I examined the request headers  and the POST data was being sent correctly  Similarly  if I use the application json header  I again cannot access the sent data via the   POST array   If you want to use the application json content-type header  then you must access the raw POST data in PHP  via php   input  not with   POST   References  1  How to access POST data in PHP  How to access POST data in PHP  2  Details on the application json type  with some sample objects which can be converted to JSON strings and sent to the server  http   www ietf org rfc rfc4627 txt

User · Answer

I recommend the jquery post   method

[php] Send JSON data from Javascript to PHP?

Examples related to php

Examples related to javascript

Examples related to ajax

Examples related to json