访问数据库时的 AJAX & JQUERY

Question

Good day!

I have a problem when using AJAX & JQUERY when accessing my database. After searching from the internet this script (I think) fit on my problem. I tried to mimic it but failed. Using JQuery AJAX and php to fetch data from a mysql database

my code: userValidation.php

include '..\assets\database\connect.php';
$userLN = $_GET['userLN'];
$userFN = $_GET['userFN'];
// $userMN = $_GET['userMN'];
$regStatus='';

$i=0;
$getInfo = array();
$valLN=$valFN=$valMN='';
$query = "SELECT studLastname, studFirstname, studMiddlename FROM tblstudentinfo ";
$query .= "WHERE studLastname=? AND studFirstname=?";
$stmt = $conn->prepare($query);
$stmt->bind_param('ss',$userLN,$userFN);
$stmt->execute();
$stmt->store_result();
if($stmt->num_rows > 0){
    $stmt->close();
    $conn->close();
    $regStatus='exist';
}else{
    $regStatus='not exist';
}
echo json_encode($regStatus);

index.php

$('#btnNext').click(function() {
    var regStatus='';
    var urlParam='';
    var LN = document.getElementById('studRegLN').value;
    var FN = document.getElementById('studRegFN').value;
    urlParam="userLN="+LN+"&userFN="+FN;
    $.ajax({
      url: 'ajax/userValidation.php',
      data: urlParam,
      type: 'GET',
      dataType: 'json',
      success: function(data)
      {
        regStatus=data;
        alert(regStatus);
      }
    });
  });

My Scenario: When an admin user register a Student Assistant it will input the last name and first name. when the next button clicked before accessing the next part of the page it will validate first if the SA(student Assistant) is already exist.

so there are $regStatus & var regStatus variable... i want to use alert(); just to test if the variable was passed from $regStatus to regStatus(java variable).

BUT if you have better way to do this, then feel free to post your recommendations + code. Thank you

UPDATE these are my screenshot that proves the codes is not working

notice the next button... I just clicked that but no alert(getStatus) pop-up

Answer 1

Change your ajax with this one.

$('#btnNext').click(function() {
        var regStatus='';
        var urlParam='';
        var LN = document.getElementById('studRegLN').value;
        var FN = document.getElementById('studRegFN').value;
        urlParam="userLN="+LN+"&userFN="+FN;
        $.ajax({
            url: 'ajax/userValidation.php',
            data: urlParam,
            type: 'GET',
            dataType: 'json',
            success: function(data){
              regStatus=data;
            }
        });
    });

Answer 2

A handful of problems:

1) not URL-encoding your querystring parameter values, especially since they're names and might easily contain characters not permitted on a querystring. Let jQuery handle this for you by passing an object as the "data". NB You could also consider sending this request as POST, then the values will be in the request body, and cannot cause problems on your querystring.

2) It's not clear whether you wait until the document is fully loaded before you declare your "click" event handler. In an earlier revision of the question you had a document.ready block inside the click handler, which made no sense. If you haven't already, wrap your button click code inside a document.ready handler, to ensure that your button already exists in the DOM by the time you try to bind to it. Also ensure you used the correct ID selector - I can't see your HTML so can't check that for you.

3) Ajax calls are asynchronous, so put your alert inside the "success" function as Priyank suggested, if you want to see the updated value of regStatus. Otherwise the alert runs before the ajax call is complete, so you won't see the updated value

4) It's not clear what type of button you've used (again, the HTML is missing from your question), but if it's a submit type, then it will post back the page simultaneously unless you explicitly prevent that in your JS code. If it posts back, then the page is destroyed and your ajax request will either not run, or the response from it will be be lost because the page it ran from is destroyed.

Putting these all together should result in something like this:

$(function() { //don't declare click handler until document is fully ready and all HTML elements are loaded.
  $('#btnNext').click(function(event) {
    event.preventDefault(); //prevent default button postback behaviour, if any
    var regStatus='';
    var LN = document.getElementById('studRegLN').value;
    var FN = document.getElementById('studRegFN').value;

    $.ajax({
      url: 'ajax/userValidation.php',
      data: { //let jQuery do the URL-encoding for you
            "userLN": LN,
            "userFN": FN
      },
      type: 'GET',
      dataType: 'json',
      success: function(data)
      {
        regStatus = data;
        alert(regStatus); //alert must be in here to definitely delay executing the alert until the variable is populated from the asynchronous server response
      },
      error: function(jqXHR) { //handle ajax errors
        alert("Error: " + jqXHR.responseText);
      }
    });
  });
});

Answer 3

Ajax Call Should be like.

    var lanme=document.getElementById('studRegLN').value;
    var fname=document.getElementById('studRegFN').value;
    $.ajax({
     url: 'ajax/userValidation.php',
     type:'GET', /* GET or POST */     
     data: {
            userLn:lname,
            userFn:fname
            },
     dataType: 'json',
     success: function(data)
     {
       regStatus=data;
     }
    });

Hey, i'm new to Stack overflow Sorry for bad English.