geeks geeks - 5 months ago 43
jQuery Question

How to pass Array of JSON Data from one html page to other html page?

I am creating profile page for user. I have two html page: page1: login.html and page2:profile.html. From one page:1 we login, after successfully login, it will redirect to userProfile page:2. I am sending the user info from page1 to
page2, like Name, Address, Mobile Number, Email-Id etc, in form of JSON,

I want to use sesstion, but not localStorage

Format of JSON is

[{"userInfo":{"id":"1","username":"nee","Name":"Neelabh", "address":"Bangalore","Email":"nee@gmail.com"}}]


I use this reference for help: JqueryMobile (JQM), Json and passing data to a new page

JavaScript in Login Page:

<script type="text/javascript">
$(document).ready(function(){
var userData = {
storeUserDataInSession: function(userData) {
var userObjectString = JSON.stringify(userData);
window.sessionStorage.setItem('userObject',userObjectString)
},
getUserDataFromSession: function() {
var userData = window.sessionStorage.getItem('userObject')
return JSON.parse(userData);
}
}

$("#register-form-header").submit(function(){

var uName = $('#userName').val();
var upassd=$('#password').val();

$.ajax({
url:"http://localhost/login/login.php",
type:"POST",
dataType:"json",
data:{type:"login",uName:uName,password:upassd},

ContentType:"application/json",
success: function(response){
$.each(response, function(index,value){


});
//alert(JSON.stringify(response[0]));

userData.storeUserDataInSession(response);

window.location = 'userProfile.html';
return false;
},
error: function(err){
//alert(JSON.stringify(err));
alert("fail");
window.location.href = 'error.html';
}
});
return false;

});
//loadJSON(0);
});
</script>


javascript in Profile Page

<script>

$( document ).ready(function() {
var userData = {
storeUserDataInSession: function(userData) {
var userObjectString = JSON.stringify(userData);
window.sessionStorage.setItem('userObject',userObjectString)
},
getUserDataFromSession: function() {
var userData = window.sessionStorage.getItem('userObject')
return JSON.parse(userData);
}
}

var userDataObject=userData.getUserDataFromSession();
var data=userDataObject[0].userInfo.username;
alert(data);
});
</script>


This profile page success fully able to print HardcodedInfo "Neelabh", I don't know How to send the JSON array of data to other page, Please check I mentioned Array of Json Data,

PHP code

$result=mysql_query($query);
$totalRows=mysql_num_rows($result);
if($totalRows>0){
$recipes=array();
while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){
$recipes[]=array('userInfo'=>$recipe);
}
echo json_encode($recipes);
}


Above code is working code Thanks to Mateusz Majewski

Answer
var userData = {
 storeUserDataInSession: function(userData) {
     var userObjectString = JSON.stringify(userData);
     window.sessionStorage.setItem('userObject',userObjectString)
 },
 getUserDataFromSession: function() {
     var userData = window.sessionStorage.getItem('userObject')
     return JSON.parse(userData);
 }
}

Then in your success() callback you do

userData.storeUserDataInSession(response);

To retrieve the data you run

userData.getUserDataFromSession()