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