Getting Json data from jquery ajax to php and redirect the page

Question

I have written front end simple login application using Jquery, ajax and json, I want to send json information to php and it has to retrieve the data of json and if successful it has to redirect to another page, Here is the simple front end code I am using.

!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="login.css">
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function(){
                $("#submit").on('click',function(){
                    var person={
                    user:$("#user").val(),
                    pass:$("#pass").val(),
                    }
                    $.ajax
                    ({
                        type: "POST",
                        url: '/test/login.php',
                        dataType: 'json',
                        async: false,
                        data: person,
                        success: function () {

                        }
                     })
            });
            });
</script>
    </head>
<body>
    <div id="loginstyle">
<form action="login.php" method="post">
<table>
<tr>
<td>
Email:</td><td><input type="email" name="email" id="user" ></td>
<tr><td>Password:</td><td><input type="password" name="password" id="pass"><td></tr>
</table>
<input type="submit" value="submit" id="submit">
</div>
</form>
</body>
</html>

Can anybody suggest me how to decode the json data and print the user and pass in login.php

score 0 · Answer 1 · answered Dec 27 '15 at 05:06

0

You have to do it this way

$.ajax
({
     type: "POST",
     url: '/test/login.php',
     dataType: 'json',
     async: false,
     data: person,
     success: function (data) {
           var res = $.parseJSON(data);
           //DO SOMETHING WITH res
           //IF res is some value, redirect, otherwise not.
     }
});

answered Dec 27 '15 at 05:06

Hemal

3,682
1
23
54

I know but it was in the original question, so i kept it – Hemal Dec 27 '15 at 05:25
I have problem not with front end, I want to know how to write code in php which I mean is to retrieve json data and validate it with some value, Please if you have time can you show me how the php code is written – potu yashwanth Dec 27 '15 at 06:09
You can encode your php data in json with `json_encode(YOUR_PHP_DATA)`, and then return it. – Hemal Dec 27 '15 at 06:11
I have problem with receiving json in php, and get user and password from it, sending I think will be next step, I tried like this,but I am getting null output – potu yashwanth Dec 27 '15 at 07:03

score 0 · Answer 2 · edited May 23 '17 at 11:44

1st: You can use e.preventDefault() while submit to prevent reloading the page

$("#submit").on('click',function(e){
    e.preventDefault();

2nd: while you use type: "POST", and pass user: and pass: you need in php

<?php
   echo($_POST['user']);
   echo($_POST['pass']);
?>

and in ajax success callback function

success: function (data) {
           alert(data);
        }

in this case maybe no need to use json as a dataType

3rd : It will be good to Take a look at

What does "async: false" do in jQuery.ajax()?

$.ajax - dataType

encode json using php?

How to get JSON data on ajax call

how to parse json data with jquery / javascript?

score 0 · Answer 3 · answered Dec 27 '15 at 05:42

when you call $.ajax, function, you define a parameter called successful and you usually give it a function to be executed once the call is successful meaning: the server has been called with the given parameters and a response was received. The response could (or could not) contain additional data passed in the data variable that you would use when calling the successful function.

Here is the tricky part: although the parameter is called successful, in your context, the provided credentials might not be valid, so, in your PHP code, you would notify the ajax call that the login attempt was not accepted, and you might want to pass the information inside the data variable. The above scenario describes an unsuccessful login attempt, but a successful ajax call. Here is what you need to do in your javascript code to distinguish whether the user should be forwarded to next page or not:

$.ajax({
 type: "POST",
     url: '/test/login.php',
     dataType: 'json',
     async: false,
     data: person,
     success: function (data) {
           // your php code should populate the (data) variable
           // in this example I used the variable as a string,
           // but you could use json notation and have a more 
           // complex structure (like data.valid = true)
           if (data == "valid_credentials") {
                window.location.href = 'nextpage.php';
           }
           else
           {
               alert('the provided credentials were not accepted.');
           }
     }
});

I have problem not with front end, I want to know how to write code in php which I mean is to retrieve json data and validate it with some value, Please if you have time can you show me how the php code is written — potu yashwanth, Dec 27 '15 at 06:10

Getting Json data from jquery ajax to php and redirect the page

3 Answers3