5

How to make an ajax request for connection

 2 years ago
source link: https://www.codesd.com/item/how-to-make-an-ajax-request-for-connection.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How to make an ajax request for connection

advertisements

I have this in my PHP code, and it currently does the login request in the same login.php page but now i want to do it with Ajax. Basically I have this in the login.php

       echo '<form method="post" ><div id="login" class="login">
        <label for="login">User Name</label>
        <input type="text" name="logInUsername" />
        <label for="Password">Password</label>
        <input type="password" name="logInPassword" />
        <input type="submit" value="Submit"  name="submitlogin" class="button" />
        </div>';

I would like to still use this but have a login_request.php or something where i can send the username and password validated and then change the <div id=login> to say you are logged in!</div> I can do it the conventional way, with the form post .. but now I would like to try it with Ajax.

Any help will be much appreciated.

Regards

What have you tried so far? This is how I would start:

This should get you started:

HTML:

<form id="loginForm">
    <div id="login" class="login">
        <label for="login">User Name</label>
        <input type="text" name="logInUsername" />
        <label for="Password">Password</label>
        <input type="password" name="logInPassword" />
        <input type="button" value="Submit" id="submitlogin" class="button" />
    </div>
</form>

jQuery:

$("#submitlogin").click(function() {
  inputs =   //grab then inputs of your form #loginform
    $.ajax ({
       url: "urltoyourloginphp.php",
       data: inputs,
       success: function() {
        $("#login").html("You are now logged in!");
    }
  });
})

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK