$.ajax is not returning the response

Question

Hello there i'm having trouble getting the response of ajax request, i had done this many times but i don't know what's the problem is now, I've been pulling my hair for a day now in this,i had tried using complete, error or .done, nothing works. What i'm doing is to insert data through ajax and then get the response if data is inserted, now the data is inserted fine but i'm not getting the response, can you please help me, and there are no console errors.

insert_ajax.php

<?php
?>
<html>
<head>
    <title>Basic Ajax Insert</title>
    <link rel="stylesheet" href="style/style.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css"/>
    <script src="jquery-1.3.1.min.js"></script>
    <script src="custom.js"></script>
</head>
<body>
    <div class="container">
    <div id="succ"></div>
    <h2 class="text-warning">Basic Information</h2>
    <form id="form" action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post" autocomplete="off">

        <div class="form-group col-md-6">
            <label class="text-warning">First Name: </label>
            <input class="form-control first_name" type="text" name="fname"     />
        </div>

        <div class="form-group col-md-6">
            <label class="text-warning">Last Name: </label>
            <input class="form-control last_name" type="text" name="lname" />
        </div>

        <div class="form-group col-md-6">
            <label class="text-warning">Email: </label>
            <input class="form-control email" type="text" name="email" />
        </div>
        <div class="form-group col-md-6">
            <label class="text-warning">Password: </label>
            <input class="form-control pwd" type="password" name="pass" />
        </div>

        <button class="btn btn-warning" name="btn_sub">Send</button>

    </form>
    </div>
</body>
</html>

ajax.php

<?php

$con=mysqli_connect("localhost","root","","practices");

if(isset($_REQUEST['em'])){
echo'email received..: '.$_REQUEST['em'];
}

$fname=$_REQUEST["fn"];
$lname=$_REQUEST["ln"];
$email=$_REQUEST["em"];
$pass=$_REQUEST["pwd"];
//echo "returned";
$ins="insert into `user` (`first_name`,`last_name`,`email`,`password`) 
values('$fname','$lname','$email','$pass')";
$query=mysqli_query($con,$ins);

if($query){
    echo "Data is entered Love";
}
?>

custom.js

$(document).ready(function(){

$(".btn").click(function(){

    var fname=$(".first_name").val();
    var lname=$(".last_name").val();
    var email=$(".email").val();
    var pass=$(".pwd").val();

    $.ajax({
      method: "POST",
      url : "ajax.php",
      data: {fn:fname,ln:lname,em:email,pwd:pass},
      success: function(r){
        alert(r);
      }

    });



});

});

if you use the developer console in firefox/chrome & look at the network tab, do you see 'Data is entered Love' as the response body from ajax.php? try adding a 2nd parameter to your success function & alerting that, i.e. `success: function(r, s){ alert(r); alert(s); }` — Rob G, Mar 20 '16 at 14:31
You are not preventing your form from posting traditionally, i.e. `e.PreventDefault();`. So your js code does an `$.ajax()` to your `ajax.php`, but your page is then refreshed by your form posting so it will not `alert()` the response. — Sean, Mar 20 '16 at 14:33
@RobGudgeon.. no i've checked the network tab, there is no response — Mashhood Ali, Mar 20 '16 at 14:40
im not using submit button,,im using a simple button in my form,,dos that refresh the page too??? — Mashhood Ali, Mar 20 '16 at 14:41
A button by default is `type="submit"` (see also http://stackoverflow.com/q/2825856/689579). So if it is inside a form, it will submit it by default. You can change the type, i.e. `type="button"`, or prevent its default action in js, i.e. `$(".btn").click(function(e){ e.PreventDefault(); ... });` — Sean, Mar 20 '16 at 14:51

score 1 · Accepted Answer · answered Mar 20 '16 at 14:51

1

Try after changing to these lines,

$(".btn").on("click",function(e){
   e.preventDefault();
var fname=$(".first_name").val();
var lname=$(".last_name").val();
var email=$(".email").val();
var pass=$(".pwd").val();

$.ajax({
  method: "POST",
  url : "ajax.php",
  data: {fn:fname,ln:lname,em:email,pwd:pass},
  success: function(ind,val){
    console.log(ind);
    console.log(val);
  }

});

answered Mar 20 '16 at 14:51

Maninderpreet Singh

2,569
2
17
31

Looks similar to my answer, which Sean has shown, is not correct – Rob G Mar 20 '16 at 14:59
i change only it with .on slector otherwise i can't found any incorrect thing in ur ans some time directly .click is not work then i done it with .on yes i think ur ans is right :) – Maninderpreet Singh Mar 20 '16 at 15:02
2

@RobGudgeon the difference is `function(e){ e.preventDefault();`. This prevents the default action of the button, which is by default `type="submit"`. The issue was not in the `success:` section. – Sean Mar 20 '16 at 15:11

score 0 · Answer 2 · answered Mar 20 '16 at 18:55

0

How about this Instead:

$.post("aqjax.php",{fn:fname,ln:lname,em:email,pwd:pass})
.done(function(data)
{
//Do stuff here
})

answered Mar 20 '16 at 18:55

Dimitrios Desyllas

9,082
15
74
164

$.ajax is not returning the response

2 Answers2