Login using jQuery,Ajax and JSON to Display a site inside of an iFrame

So what I'm trying to accomplish is when a Student log-in. He gets his schedule. The thing is I can't get it to work. I have tried alot and it's still not working. It's hard to explain what I Mean but, When a Student register with his User-ID. It saves on the DB. I Know how to do that. But I'm fairly new to JSON and got little experience with Ajax.

HTML: (It's a Popup using jQuery)

<div data-role="dialog" id="login" data-theme="a">
    <div data-role="header">
       <h1>Login</h1>
       <form id="form1" name="form1" action="login.php" method="post">
        </div>
        <div data-role="content">
        <table>
            <span>Log hier in met je Gebruikersnaam en Wachtwoord om Je eigen vaste roosters
                te bekijken.</span>
            <div data-role="fieldcontain">
                <label for="gebruikersnaam">Username:</label>
                <input type="text" name="username" id="username" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset">
            </div>
            <div data-role="fieldcontain">
                <label for="wachtwoord">Password:</label>
                <input type="password" name="password" id="password" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset">

            <p>Nog Geen Member? <a href="registratie.html">Registreren.</a></p>
            </form>
            </div>
            <a data-role="button" id="login" class="ui-btn-active" href="login.php">Login</a>
            <div id="message"></div>
            </table>
        </div>
    </div>

Javascript:

$(document).ready(function() {

$("#login").click(function() {

var action = $("#form1").attr('action');
var form_data = {
    username: $("#username").val(),
    password: $("#password").val(),
    is_ajax: 1
};


var userID = null;

$('#leerlingen_display').attr('src', '/RTW/Roosters/leerlingen/lee_' + userID + '.htm');

$.ajax({
url: 'http://82.94.231.186/RTW/Roosters/leerlingen/lee_' + userID + '.htm',
type: 'GET',
dataType: 'HTML',
success: function(data) {
    $('#leerlingen_display').html(data);
},
error: function(a,b,c) {
    alert('Error during the loading');
}
});

PHP:

<?php

$is_ajax = $_REQUEST['is_ajax'];
if(isset($is_ajax) && $is_ajax)
{
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];

if($username == 'admin' && $password == 'password')
{
    echo json_encode(array('status' => true; 'userid' => 10220));
} else {
    echo json_encode(array('status' => 'false', 'message' => 'username and / or     password incorrect'));
}
}

?>

Maybe by looking at the code you will understand what I mean, I Still have to make it that the login connects to the database to check. Thanks to @mercsen to helping me improve the code.

Answers


I see you're trying to get an external website using AJAX - this is not allowed and will not work, as it's against Same Origin Policy.

One way is to create a PHP proxy that would scrape the target page and return results to your AJAX instead... you would need to study a bit for that solution however.

Check this Google Link for more info on that subject.


Need Your Help

Get file from disk in order to stream it as part of a HTTP response

javascript http node.js

I am writing HTTP server on top of Node.js, without using HTTP module.

Can't use object variables without getter methods

java oop inheritance

I have an abstract class, AbstractNode, and a concrete class which extends it- Node.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.