jQuery AJAX Data

Sheeraz Gul Jun 09, 2022
jQuery AJAX Data

The AJAX data is the data sent to the server and used by the server. This tutorial demonstrates how to send data to the server using AJAX in jQuery.

jQuery AJAX Data

The data sent to the server using AJAX can be a JSON object, string, or array. This data is further used on the server page for any purpose.

We can send single or multiple data using an array or JSON object. We use the syntax below to send multiple data fields with the array.

data: {username: username, password: password}

This method can send multiple data fields to the server, and we can use them for further processes. In this case, a JSON object is more convenient where we can send all the data fields in a serialized JSON object.

Let’s try an example to send multiple data fields using a JSON object. See example:


<!doctype html>
<title>jQuery Ajax Data</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form id="Login_Form" method="post">
        Enter the Username:
        <input type="text" name="username" id="User_Name" />
        Enter the Password:
        <input type="password" name="password" id="Password" />
        <input type="submit" name="loginBtn" id="Login_Button" value="Login" />
<script type="text/javascript">
$(document).ready(function() {
    $('#Login_Form').submit(function(e) {
            type: "POST",
            url: 'demo.php',
            data: $(this).serialize(),
            success: function(response) {
                var JSON_Data = JSON.parse(response);
                // user login check
                if (JSON_Data.success == "1" && JSON_Data.username == "admin" && JSON_Data.password == "password" )
                    document.write('Login Success');
                    alert('Invalid User Name and Password!');

The code above sends the form data using the $.ajax and post method to the server, and the server will use the data for login purposes; the data is sent in a serialized object using data: $(this).serialize(), syntax. Here is the demo.php server page.

if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) {
    //Here we can also perform authentication
    echo json_encode(array('success' => 1, 'username' => $_POST['username'], 'password' => $_POST['password'] ));
} else {
    echo json_encode(array('success' => 0));

The server code checks if the user name and password are set, then creates a JSON object to send back to AJAX. We authenticated the login in jQuery on the index.html page.

See the output for the code in the animation below.

jQuery Ajax Data

Author: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Related Article - jQuery AJAX