Jquery Ajax example - Jquery Ajax Post






A simple Jquery Ajax example using a POST request

First you will need to create your form, in this case we will create a login form, forget about all my classes as I am using framework 7, the most important part is to understand that I have just added a <form> tag, 2 fields with name="email" and name="password"

The sign in button has a class of "button" and an id of "signin"


        <form>
          <div>
            <ul>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Your email</div>
                  <div class="item-input-wrap">
                    <input type="text" name="email" placeholder="Email">
                    <span class="input-clear-button"></span>
                  </div>
                </div>
              </li>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Your password</div>
                  <div class="item-input-wrap">
                    <input type="password" name="password" placeholder="Password">
                    <span class="input-clear-button"></span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="list">
            <ul>
              <li>
                <a href="#" type="button" class="button col button-big button-raised button-fill button-green" id="signin">Sign in</a>
              </li>
            </ul>
            <div class="block-footer md color-indigo text-align-center">Forgot password | Register</div>
          </div>
        </form>


Now the ajax:

I have create constants

<script>
$('#signin').on('click', function (e) {
    e.preventDefault();
  
    var usernameInput = $('#username').val();
    var passwordInput = $('#password').val();
  
      $.ajax({
            url: 'https://mywebsite.com/login.php',
            method: 'POST',
            data: {
                'username': usernameInput,
                'password': passwordInput,
            },
            dataType: "json",
  
            beforeSend: function () {
                //Here you can show a loader just before sending the data, simply wrap a div with an id of "loader" around an animated gif image:
               $('#loader').show();
            },
            statusCode: {
                //If status is 200, means that the request is worked
                200: function (response) {  //Send the response as Json
               //Here you can send people to another page like
               window.location.href = "http://mywebsite.com/page1.php";
                },
  
                401: function (response) { //Unauthenticated
               //Here you can send people to another page like
               window.location.href = "http://mywebsite.com/page2.php";
                 
                },
                402: function (response) { //Bad Url
                
                              //Here you can send people to another page like
               window.location.href = "http://mywebsite.com/page3.php";
                },
                400: function (response) { //Bad request
               //Here you can send people to another page like
               window.location.href = "http://mywebsite.com/page4.php";
                
                },
                404: function (response) { //Not found
               //Here you can send people to another page like
               window.location.href = "http://mywebsite.com/page4.php";
                
                },
                500: function (response) { //Wrong Login Details
  
                //Here you can send people to another page like
               window.location.href = "http://mywebsite.com/page5.php";
                },
            },
        });
    });
</script>


Now the reason I wanted to do something after each error code in this example is because I am using each response to launch another function(which I have not attached to make the code simpler for you).

But what you could simply do if you do not want to mess around with all the error codes is this:


<script>
$('#signin').on('click', function (e) {
    e.preventDefault();
  
    var usernameInput = $('#username').val();
    var passwordInput = $('#password').val();
  
      $.ajax({
            url: 'https://mywebsite.com/login.php',
            method: 'POST',
            data: {
                'username': usernameInput,
                'password': passwordInput,
            },
            dataType: "json",
  
            beforeSend: function () {
                //Here you can show a loader just before sending the data, simply wrap a div with an id of "loader" around an animated gif image:
               $('#loader').show();
            },
  success: function(){
       window.location.href = "http://mywebsite.com/page1.php";
  },
  error: function(){
      window.location.href = "http://mywebsite.com/page2.php";
  }
    });
    });
</script>


If you have enjoyed this tutorial, do not forget to leave us a message!



Leave us a comment