Sending form data using JQuery and parsing the returned JSON data

Question

This may be a relatively simple task, but I don't know why I've been struggling with it for the past 3 days.

I have to create a login form that sends the email and password to a php file. The php file validates the user and returns JSON data. The JSON returned if the login is successful:

enter{"error":0,"message":"User successfully logged in!","api_key":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdHJlZXRlYXRfdXNlcmhhbmRsZXIiLCJleHAiOjE0NDA0Mjg5NDEsImlhdCI6MTQzOTUyODk0MX0.OcDRN4tiQrZPJnpA3Iw2tF4kogYxX-DuDhFqd8vqQts"}

If login isn't successful:

enter{"error":1,"message":"User doesn't exist!"}

The form needs to redirect the user to another html page if the login is successful. I have tried almost every jQuery method ($.post, $.ajax) to send the form data and receive the JSON data but have been unsuccessful so far. The code I tried:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="img.js"></script>
</head>

<body>
<div data-role="page">
<div data-role="header" class="ui-content">Login</div>
<div data-role="content" class="ui-content">
<form method="post" action="#" id="loginform">
  <div class="ui-field-contain">

  <br>
  <div>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" data-clear-btn="true">
  </div>

  <div>
     <label for="password">Password:</label>
     <input type="password" name="password" id="password" data-clear-btn="true">
 </div>
 <input type="button" value="Login" id="login">
 </div>
 </form>
 </div>

JavaScript code:

$(document).ready(function(){
  $("#login").click(function(){
    var email = $("#email").val();
    var password = $("#password").val();
    // Checking for blank fields.
    if (email =='' || password =='') {
      alert("Please fill all fields...!!!!!!");
    }
    else {
      $.post("http://streetdict.esy.es/v1/login",{ email: email, password:password},
        function(data) {
          var json_response=data;
          alert(json_response);
      });
    }
  });
});

This code basically should just show the JSON response as an alert right? Except that it just doesn't show anything. What I need to do is if the login is successful, it should redirect to another page called untitled.html using ajax, asynchronously. Someone please help me!

Did you check the network tab in the console to see if a request is made and if the response comes back successfully? — nancyolson531
– nancyolson531, Commented Aug 14, 2015 at 5:27

dom · Accepted Answer · 2015-08-14 05:37:22Z

1

use below code to send post request and then check for response

$(document).ready(function(){
 $("#login").click(function(){
 var email = $("#email").val();
 var password = $("#password").val();
 // Checking for blank fields.
 if( email =='' || password ==''){
 alert("Please fill all fields...!!!!!!");
  }
 else {

  $.ajax({
     url:'http://streetdict.esy.es/v1/login',
     type:'POST',
     data:{ email: email,  password:password},
     success:function(data){
         if(data['error'] == '0'){
             window.location.href = 'untitled.html';
         }
     },
     error:function(e){
         alert("error in request");
     },
  });

}
   });
  });

answered Aug 14, 2015 at 5:37

dom

1,1061 gold badge11 silver badges25 bronze badges

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

Comments

Sujithrao · Accepted Answer · 2015-08-14 07:00:05Z

1

    $(document).ready(function(){
  $("#login").click(function(){
    var email = $("#email").val();
    var password = $("#password").val();
    // Checking for blank fields.
    if (email =='' || password =='') {
      alert("Please fill all fields...!!!!!!");
    }
    else {
      $.getJSON("http://streetdict.esy.es/v1/login",{ email: email,        password:password}).done(function(data) {
           $.each(data, function(key, value) {
//you can do your logic here
      });
    }
  });
});

answered Aug 14, 2015 at 7:00

Sujithrao

7853 gold badges12 silver badges27 bronze badges

Comments

gangzi · Accepted Answer · 2015-08-14 05:52:25Z

0

You can check if the string you response to json.

answered Aug 14, 2015 at 5:52

gangzi

1052 silver badges13 bronze badges

Collectives™ on Stack Overflow

Sending form data using JQuery and parsing the returned JSON data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related