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 rightNancy Moore– Nancy Moore2019年10月07日 17:44:59 +00:00Commented Oct 7, 2019 at 17:44
-
Yey, the only difference is that the data can be changed on the client side.JCss– JCss2019年10月07日 17:48:36 +00:00Commented Oct 7, 2019 at 17:48
-
must the dataType be send as json or in html.Nancy Moore– Nancy Moore2019年10月07日 18:00:18 +00:00Commented Oct 7, 2019 at 18:00
-
It can be also another file, but since JSON is simple for data transfer? I use it this way.JCss– JCss2019年10月07日 18:22:15 +00:00Commented Oct 7, 2019 at 18:22
1 Answer 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
Thanks Nancy, I play arround with this.
Nancy Moore
am glad you like it. can you accept it now as the answer. please also upvotes. Thanks
default