Jquery ajax() function won't load PHP script

Question

I'm trying to create a simple login with PHP and MySQL and I'm using the AJAX() jquery function to load the PHP script. All that I want to do is to load a new web page (for example java2s.com) when the script finds the user in my database. Problem is that the script won't work at all. This is the HTML with the Jquery:

EDIT: This is the fixed code thanks to all those who commented, which sadly still doesn't work.

<!DOCTYPE HTML>
<html>
<head>
<title> Login </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
function change()
{
document.location.href="http://www.java2s.com";
}

$(document).ready(
$("#loginForm").click(function() {
var jsonlogin=new Object();
jsonlogin.username=$('#username').val();
jsonlogin.password=$('#password').val();
var sendstr = JSON.stringify(jsonlogin);
$.ajax({
        type: 'POST',
        url: 'login.php',
        async: false,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: sendstr,
        success:function(response){
        if (response['result']=="login successful")
            {
            change();
            }
        }
    });

    })
  )
</script>
</head>
<body>
<h1> INSERT USERNAME AND PASSWORD</h1>
<input type="text" id="username" name="username"> USERNAME <br>
<input type="password" id="password" name="password"> PASSWORD <br>
<input type="submit" id="loginForm" class="button positive">
</body>
</html>

The PHP script is very simple:

<?php
$data = file_get_contents('php://input');
$result = json_decode($data);
$con=mysqli_connect("localhost","****","*****","*******");
$str="SELECT ID FROM users WHERE username='".$result->username."' AND password='".$result->password."';";
$exists = mysqli_query($con,$str);
if (mysqli_num_rows($exists) ==1)
{
    $arr = array('result'=>"login successful");
    $ris=json_encode($arr);
    echo $ris;
}
else
{
    $arr= array('result'=>"login error");
    $ris=json_encode($arr);
    echo $ris;
}
mysqli_close($con)
?>

When I load the page and press the submit button nothing will happen. Anyone can help? Thank you very much in advance

your PHP code is all commented...! And may be not calling AjaxJson() function...! — Sudhir Bastakoti
– Sudhir Bastakoti, Commented Nov 8, 2013 at 11:57

rajesh kakawat · Accepted Answer · 2013-11-08 12:32:21Z

1

try something like this

$("#loginForm").click(function() {
    var jsonlogin=new Object();
    jsonlogin.username=$('#username').val();
    jsonlogin.password=$('#password').val();
    $.ajax({
        type: 'POST',
        url: 'login.php',
        async: false,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: jsonlogin,
        success:function(response){
            if (response['result']=="login successful")
            {
                change();
            }
        }
    });
})

EDITED CODE

you have not implemented DOM ready method correctly

    $(document).ready(function(){
        // code goes here
    });

edited Nov 8, 2013 at 12:32

answered Nov 8, 2013 at 12:07

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

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

1 Comment

Stefano Kira Over a year ago

Oops...I didn't notice I was using 'data' as the response variable XD Thank you! Despite this, the script still doesn't show up...

Rested · Accepted Answer · 2013-11-08 11:57:26Z

0

Maybe because all the php is commented out?

Also in your success function should look like this:

success: function(response){
    dosomethingwithrespones(response);
}

The data in the $.ajax denotes what you send.

answered Nov 8, 2013 at 11:57

Rested

1972 silver badges9 bronze badges

1 Comment

Stefano Kira Over a year ago

Ehm, ignore the comments, the original code isn't commented, that's because of some debug trials XD Ok, I'll try editing the success function

Kalpit · Accepted Answer · 2013-11-08 12:29:06Z

0

why are you using function ajaxJson()... try to remove it and if you really want to use it then modify your button code like this and remove $("#loginForm").click(function() { } from jquery...

  <input type="submit" id="loginForm" class="button positive" onclick="ajaxJson()">

and change <script type="text/javascript"> instead of <script language="javascript">.. this identifier is not standard, this attribute has been deprecated(outdated by newer constructs) in favor of type.

first way

 function ajaxJson()
 {
       //your code goes here without triggering **click** event.. 
 }

 <input type="submit" id="loginForm" class="button positive" onclick="ajaxJson()">

second way

  $("#loginForm").click(function() 
  {
      //your code goes here...
  }

  <input type="submit" id="loginForm" class="button positive">

keep everything outside $(document).ready function...

hope it may help you

edited Nov 8, 2013 at 12:29

answered Nov 8, 2013 at 12:04

Kalpit

4,9365 gold badges27 silver badges45 bronze badges

4 Comments

Stefano Kira Over a year ago

Thank you for your answer! :) I tried the first way but it still won't work...Script doesn't load at all

Kalpit Over a year ago

have you kept your code outside $(document).ready() function? or else try, keep your javascript code after html

Stefano Kira Over a year ago

I tried now and it didn't help :( what do you mean with "keeping my javascript code after html?" By the way I'm wondering if there's a problem with the PHP script, but that would be very strange as I can't run it even if I just echo the "login successful" string without doing anything else...

Kalpit Over a year ago

try to change <script type="text/javascript"> bcz i think language="javascript" is deprecated

Nagarajbgk · Accepted Answer · 2013-11-08 12:41:10Z

0

You have missed ending { and } for ready function.try below code.

<!DOCTYPE HTML>
<html>
<head>
<title> Login </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
function change()
{
document.location.href="http://www.java2s.com";
}

$(document).ready(function () {
$("#loginForm").click(function() {
alert("hi");
var jsonlogin=new Object();
jsonlogin.username=$('#username').val();
jsonlogin.password=$('#password').val();
var sendstr = JSON.stringify(jsonlogin);
$.ajax({
        type: 'POST',
        url: 'login.php',
        async: false,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: sendstr,
        success:function(response){
        if (response['result']=="login successful")
            {
            change();
            }
        }
    });

    });
});
</script>
</head>
<body>
<h1> INSERT USERNAME AND PASSWORD</h1>
<input type="text" id="username" name="username"> USERNAME <br>
<input type="password" id="password" name="password"> PASSWORD <br>
<input type="button" id="loginForm" class="button positive">
</body>
</html>

answered Nov 8, 2013 at 12:41

Nagarajbgk

311 bronze badge

2 Comments

Stefano Kira Over a year ago

Thank you for your reply :) It says hi! XD It doesn't do anything else, but surely it's better than nothing!

Nagarajbgk Over a year ago

I have added That Alert to check Execution or Enter point of Ajax call function.is it working now ?

Krish R · Accepted Answer · 2013-11-08 12:46:04Z

try this query in login.php,

     $str="SELECT ID FROM users WHERE username='".$result->username."' AND password='".$result->password."' ";

Jquery:

           $(document).ready(function(){
            $("#loginForm").click(function() {
                var jsonlogin=new Object();
                jsonlogin.username=$('#username').val();
                jsonlogin.password=$('#password').val();
                var sendstr = JSON.stringify(jsonlogin);
                $.ajax({
                        type: 'POST',
                        url: 'login.php',
                        async: false,                         
                        dataType: 'json',
                        data: sendstr,
                        success:function(response){
                        if (response.result=="login successful")
                            {
                             change();
                            }else{
                                alert(response.result);
                                return false;
                            }   
                        }
                    });

                 });
        });

Collectives™ on Stack Overflow

Jquery ajax() function won't load PHP script

5 Answers 5

1 Comment

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related