Not getting any response with ajax

Question

I made a simple script to insert data to database using ajax and jquery . It seems that I am not receiving back any response , and I don't think I am doing something wrong . So , can anybody take a look and help me ?

process.php

<?php
    $id = $_POST['id'];
    $user= $_POST['username'];
    $password  = $_POST['password'];

    $con = mysqli_connect('localhost','root','','car_rental');

    $query = 'insert into car_admin (admin_id,admin_username,admin_password) values(?,?,?)';
    $query = $con->prepare($query);
    $query-> bind_param('iss',$id,$user,$password);

    if($query->execute()) { echo "done";}
    else { echo "failed"; }

    $query->close();
    $con->close();

?>

register.php

<script src="jquery-1.12.4.js"></script>
<script src="script.js"></script>

<form id="register" method="POST" >
    <fieldset>
        <legend>
            Register 
        </legend>
        ID: <input id="id" type="text" name="id" value="" />
    Username : <input id="username" type="text" name="username" value="" />
    Passsword : <input id="password" type="password" name="password" value="" />
    <input id="submit"  type="submit" name="submit" value="Register" />

    </fieldset>
</form>

<div id="result"></div>

jquery

$(document).ready( function() {
    $('#submit').click(function() {

         var id = $('#id').val();
         var username = $('#username').val();
         var password = $('#password').val();
        $.ajax({
            type:'post',
            url:'process.php',
            data:'id='+id+'username='+username+'password='+password,
            success:function(data){
               $('#result').html(data);

        }

    }); 
});

You can be doing more to debug this. Look at the developer console. Is your ajax request correct? Do you get a response? What does it look like? You can see it all *right there*. That will narrow down where to look *considerably*. — John Conde, Jan 09 '18 at 01:30
See: https://stackoverflow.com/questions/13464921/cross-domain-xhr-failing — John Conde, Jan 09 '18 at 01:32
I am using a local host and all scripts are in the same folder — Moudi Nasrallah, Jan 09 '18 at 01:33
This `data:'id='+id+'username='+username+'password='+password,` should be seperated by comma — hungrykoala, Jan 09 '18 at 01:36
From [here](https://stackoverflow.com/questions/6085649/ajax-multiple-data) `data: {status: status, name: name},` — hungrykoala, Jan 09 '18 at 01:37
The process page worked and values are added to database but no response xhr failed load,,,, — Moudi Nasrallah, Jan 09 '18 at 01:40
Please read [How to ask](https://stackoverflow.com/help/how-to-ask). First update your title. — buhtz, Jan 09 '18 at 01:44
Am betting page is reloading because you aren't preventing default form submit — charlietfl, Jan 09 '18 at 01:54

ASHISH SHARMA · Answer 1 · 2018-01-09T04:06:53.397

Prevent the form from submitting via the browser

You need to change your code to include the correct formatting data:'id='+id+'&username='+username+'&password='+password,

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<form id="register" >
<fieldset>
<legend>
Register
</legend>
ID: <input id="id" type="text" name="id" value="" />
Username : <input id="username" type="text" name="username" value="" />
Passsword : <input id="password" type="password" name="password" value="" />
<button id="submit"  name="submit"  />Register</button>

</fieldset>
</form>
<div id="result"></div>
<script>
$(document).ready( function() {
$('#submit').click(function(e) {
e.preventDefault(); // Prevent the form from submitting via the browser
var id = $('#id').val();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type:'post',
url:'login.php',
data:'id='+id+'&username='+username+'&password='+password,
success:function(data){

  $('#result').html(data);

}

});



});
});
</script>

You need to escape data you for use in the URL. Better yet, just pass an object and let jQuery do it for you. — Brad, Jan 09 '18 at 04:57
You also should be handling form submit, not waiting on a button click. Not everyone submits forms with buttons... some of us like to push enter. Some people use alternative input devices. — Brad, Jan 09 '18 at 04:58
@Brad i just tried to add few lines to sort out this problem..but thanku brad for this usefull comment — ASHISH SHARMA, Jan 09 '18 at 05:10

Michael Thompson · Answer 2 · 2018-01-09T09:00:32.250

-1

The reason your ajax is failing is because you are not posting the parameters correctly. If ID is 1, username is "Username", and password is "password", the following code will return the value shown.

'id='+id+'username='+username+'password='+password,
id=1username=Usernamepassword=Password

You need to change your code to include the correct formatting, as per below.

'id='+id+'&username='+username+'&password='+password,

Then your Ajax request should work. I can see no problems with your PHP. I would also suggest doing an encodeURIComponent as if your strings contain any URI characters, it will cause further problems. Take a look at this tutorial as it is an excellent example of making an Ajax request.

edited Jan 09 '18 at 09:00

answered Jan 09 '18 at 01:42

Michael Thompson

541
4
21

I made them like this { ex:ex}, but still xhr failed – Moudi Nasrallah Jan 09 '18 at 01:44
2

You ought to escape those values properly. I think `encodeURIComponent` will do what you want. – Tom Jan 09 '18 at 02:41
@Tom Yes, I have given reference to that in my answer. @MoudiNasrallah I see you have managed to resolve this by preventing the default action of the submit button. So now you are getting back the response you expect, and it is being passed to your .success() function? I would encourage you to also have a .fail function, as described here: http://api.jquery.com/jquery.ajax/#jqXHR Also, the method you have described `{ ex:ex}`, I believe is a much better way as jQuery should automatically do the uri encoding for you. And – Michael Thompson Jan 09 '18 at 02:55
Thankyou I will ! – Moudi Nasrallah Jan 09 '18 at 08:59

Not getting any response with ajax

2 Answers2