Send data from JavaScript with AJAX and JSON to the server and retrieve data from the server

Question

I am new to AJAX and JSON. I found some code from this link and modified it: send json object from javascript to php

What I want is this: I have some data (variables, arrays, ect.) in JavaScript which are dynamic (the user can change this values at runtime). Now I want to send this data to the server and save it in a PHP file. I also want to retrieve the updated data from the server. In short explained I want to save from client to server and load from server to client.

I become an error in Load() on line "alert(jsondata.num);": Cannot read property 'num' of nullat XMLHttpRequest.xhr.onreadystatechange

PHP:

<?php
  header('Content-type: application/json');
  $json = file_get_contents('php://input');
  $json_decode = json_decode($json, true); 
  $json_encode = json_encode($json_decode);
  echo $json_encode;
?>

JavaScript:

function Save() {
  var jsondata;
  var num = {"num":Math.floor(Math.random()*100)};
  var data = JSON.stringify(num);

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "demo.php", !0);
  xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xhr.send(data);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // in case we reply back from server
      jsondata = JSON.parse(xhr.responseText);
      console.log(jsondata);
      alert(jsondata.num);
    }
  }
}
function Load() {
  var jsondata;

  var xhr = new XMLHttpRequest();
  xhr.open("GET", "demo.php", !0);
  xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // in case we reply back from server
      jsondata = JSON.parse(xhr.responseText);
      alert(jsondata.num);
    }
  }
}

you want to save data and retrieved the same data via ajax right — Nancy Moore
– Nancy Moore, Commented Oct 7, 2019 at 17:44
Yey, the only difference is that the data can be changed on the client side. — JCss
– JCss, Commented Oct 7, 2019 at 17:48
It can be also another file, but since JSON is simple for data transfer? I use it this way. — JCss
– JCss, Commented Oct 7, 2019 at 18:22

Nancy Moore · Accepted Answer · 2019-10-07 18:31:00Z

1

I have created this for you for clarity. It allows user to send email and name and return json data to clients. With this you now have basics..

<!doctype html>
<html>
    <head>
        <script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
  type="text/javascript" charset="utf-8"></script>

<script>
$(document).ready(function(){

    // submit button click
    $("#submit").click(function(){


        var name = $("#name").val();
        var email = $("#email").val();

  alert(name);

        if(name != ''){
            $.ajax({
                url: 'demo.php',
                type: 'post',
                data: {name:name,email:email},
                dataType: 'JSON',
                success: function(response){
  alert(response.name);



           // selecting values from response Object
                    var name = response.name;
                    var email = response.email;

     var dt = "<div>";
     dt += "<b>Email:</b>"+email+"<br>";
     dt += "<b>name:</b>"+name+"<br>";

                }
            });
        }
    });

});

</script>

    </head>
    <body>
        <div class="container">
            <div class="content">
                <h1>Enter Details</h1>
                <div>
                    <input type="text" id="name" name="name" placeholder="Name">
                </div>

                <div>
                    <input type="email" id="email" name="email" placeholder="email">
                </div>

                <div>
                    <input type="button" value="Submit" id="submit">
                </div>
            </div>



            <div id="Result">

            </div>
        </div>
    </body>
</html>

demo.php

<?php

$name = $_POST['name'];
$email = $_POST['email'];

// insert into database 

//response
$return_arr = array('name'=>$name,'email'=>$email);

echo json_encode($return_arr);

answered Oct 7, 2019 at 18:31

Nancy Moore

2,4964 gold badges28 silver badges50 bronze badges

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

2 Comments

JCss Over a year ago

Thanks Nancy, I play arround with this.

Nancy Moore Over a year ago

am glad you like it. can you accept it now as the answer. please also upvotes. Thanks

Collectives™ on Stack Overflow

Send data from JavaScript with AJAX and JSON to the server and retrieve data from the server

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related