14.ajax Basics, using AJAX as a login page, using AJAX to verify that the user name is available, AJAX dynamic call database

Source: Internet
Author: User



Basic knowledge of 1.ajax



Ajax is a combination of jquery, PHP and other technologies to extend the comprehensive use of technology, not new content. Ajax is also written in the <script> tag.



If the use of Ajax must be 1 processing pages, processing the page just manipulate the database and return the value, the page is AJAX processing.



The Ajax notation:



test.php

<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<script src = "../ jquery-1.11.2.min.js"> </ script>
<title> Untitled document </ title>
<!-Introduce jquery package->
<script src = "../ jquery-1.11.2.min.js"> </ script> <!-The jquery introduced must be at the top->
<style type = "text / css">
</ style>
</ head>
<body>
<script type = "text / jscript">
    $ .ajax ({// () contains JSON data, and {} is added to the outer layer.
        url: "chuli.php", // Processing page address, indicating which page to use for ajax processing
        data: {code: "n001"}, // The value passed to the processing page is also JSON data, use {}. If two values are passed, add a comma in {} and write another one.
        type: "POST", // The value transmission method, generally uses the POST method, pay attention to POST must be capitalized.
        dataType: ".TEXT", // The type of the return value. 1. TEXT text, string. 2. JSON data 3. XML Extensible Markup Language, mainly used for data transfer.
        success: function (data) {// indicates what to do after successful processing, followed by an anonymous function. Callback function, which means that this function is executed after the processing page has finished processing the data. data represents the value returned by the processing page, and is received with formal parameters.
            
            },
        error: function () {// The function to be executed after processing page error.
        
            }
        });
</ script>
</ body>
</ html>
chuli.php

<? php
$ code = $ _POST ["code"];
include ("../ DBDA.class.php");
$ db = new DBDA ();
$ sql = "select name from nation where code =‘ {$ code} ’";
echo $ db-> StrQuery ("$ sql"); // If the data of ajax returns, output directly
 

2. Use ajax as the login page

denglu.php

<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<script src = "../ jquery-1.11.2.min.js"> </ script>
<title> Untitled document </ title>
</ head>
<body>
<div> User name: <input type = "text" id = "uid" /> </ div>
<div> Password: <input type = "text" id = "pwd" /> </ div>
<div> <input type = "button" value = "Login" id = "btn" /> </ div>
</ body>
<script type = "text / javascript">

$ (document) .ready (function (e) {
    $ ("# btn"). click (function () {// Add button click event
        
        // take username and password
        var u = $ ("# uid"). val (); // Fetch the entered user name
        var p = $ ("# pwd"). val (); // Fetch the input password
        
        // tune ajax
        $ .ajax ({
            url: "dengluchuli.php",
            data: {u: u, p: p}, // The second u and p are just variables and can be written at will. The u and p in dengluchuli.php are the first.
            type: "POST",
            dataType: "TEXT",
            success: function (data) {
                    if (data.trim () == "OK") // To add spaces to prevent errors caused by spaces in the content.
                    {
                        window.location.href = "main.php"; // js jump page, remember.
                    }
                    else
                    {
                        echo ("wrong username or password");
                    }
            
                }
            
            });
        
        })
});

</ script>
</ html>
dengluchuli.php

<? php
$ uid = $ _POST ["u"];
$ pwd = $ _POST ["p"];
include ("../ DBDA.class.php");
$ db = new DBDA ();
$ sql = "select password from login where username =‘ {$ uid} ’";
$ mm = $ db-> StrQuery ($ sql);
if ($ mm == $ pwd && $ pwd! = "")
{
    echo "OK";
}
else
{
    echo "NO";
}
 

3. Use ajax to verify that the username is available

testuid.php

<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<script src = "../ jquery-1.11.2.min.js"> </ script>
<title> Untitled document </ title>
</ head>

<body>
<input type = "text" id = "uid" />
<span id = "ts"> </ span>

</ body>
<script type = "text / javascript">
    
    $ ("# uid"). blur (function () {// blur triggers when focus is lost
        
        // take username
        var uid = $ ("# uid"). val ();
        
        // tune ajax
        $ .ajax ({
            url: "uidchuli.php",
            data: {u: uid},
            type: "POST",
            dataType: "TEXT",
            success: function (data) {
                    if (data> 0)
                    {
                        $ ("# ts"). html ("This account name already exists");
                        $ ("# ts"). css ("color", "red");
                    }
                    else
                    {
                        $ ("# ts"). html ("This account name is available");
                        $ ("# ts"). css ("color", "green");
                    }
                }
            
            });
        
        })


</ script>
</ html>
uidchuli.php

<? php
$ uid = $ _POST ["u"];
include ("../ DBDA.class.php");
$ db = new DBDA ();
$ sql = "select count (*) from login where username =‘ {$ uid} ’";
echo $ db-> StrQuery ($ sql);
 

 

 4. Dynamically call the database, enter keywords in the search box, the keywords in the content automatically appear below the input box.

list.php

<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<script src = "../ jquery-1.11.2.min.js"> </ script>
<title> Untitled document </ title>
<style type = "text / css">
* {margin: 0px auto; padding: 0px}
.l {width: 200px; height: 30px; text-align: center; line-height: 30px; vertical-align: middle; border-bottom: 1px solid # 60F}
</ style>
</ head>

<body>
<br />
<div style = "width: 200px; height: 35px; border: 2px solid # 60F">
    <input type = "text" id = "name" style = "width: 196px; height: 31px" />
</ div>
<div id = "list" style = "width: 200px; height: 500px; border: 2px solid # 60F;border-top: 0px "> </ div>
</ body>
<script type = "text / javascript">
$ ("# name"). keyup (function () {
    // take the name
    var n = $ (this) .val ();
    if (n! = "")
    {
        // tune ajx
        $ .ajax ({
            url: "listchuli.php",
            data: {n: n},
            type: "POST",
            dataType: "TEXT",
            success: function (data) {
                var sz = data.split ("|");
            
                var str = "";
            
                for (var i = 0; i <sz.length; i ++)
                {
                    str = str + "<div class =‘ l ‘>" + sz [i] + "</ div>";
                }
                $ ("# list"). html (str);
            
                }
        
            });
        }
        else
        {
            $ ("# list"). html ("");
        }
    
    })

</ script>
</ html>
listchuli.php

<? php
$ name = $ _POST ["n"];
include ("../ DBDA.class.php");
$ db = new DBDA ();
$ sql = "select areaname from chinastates where areaname like‘% {$ name}% ‘";
echo $ db-> StrQuery ($ sql);
14. Basic knowledge of ajax, use ajax as the login page, use ajax to verify whether the user name is available, and ajax to dynamically call the database

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.