为什么要有jquery脚本库呢？正如上面所说，php是运行在服务器端的语言，所以大部分内容与浏览器无关，php只有很少一点东西会在不同的浏览器中有不同的表现。js是运行在客户端，即web浏览器中，js代码经常需要为不同的浏览器做定制的改变，这对web开发人员来说显然是相当麻烦的，因此创建跨浏览器代码非常需要，而jQuery的功能之一就是这个。就像不同的数据库操作方法都不一样，为了方便，就有了pdo数据库抽象层，他为操作不同的数据库提供了统一的接口。说白了，jquery其实就是js。Jquery一个关键应用就是与ajax结合。
那么什么是ajax呢。即异步的javascript和xml，他的作用是在不更新整个页面的前提下，更新页面中的某些数据。
在此应用中，js文件会截获表单的提交，将表单数据发送到服务器端的php脚本，然后再使用php返回的数据来更新Web页面。因此js脚本的作用就像是客户端与服务器端交流的中间媒介。
下面以TODOlist中的登录为例，进行学习总结。
首先之前的登录我们只建立了一个文件，就完成了所有登录功能，代码如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>登录页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<?php
session_start();
$dbc=@mysqli_connect('127.0.0.1', 'root','123456','todolist')
or die('could not connect to mysql');
mysqli_set_charset($dbc,'utf8');
$error=array();
if($_SERVER['REQUEST_METHOD']=='POST'){
if(!empty($_POST['username'])){
$username=$_POST['username'];
}else{
$error[]="请输入用户名";
}
if(!empty($_POST['password'])){
$password=$_POST['password'];
}else{
$error[]="请输入密码";
}
if(empty($error)){
$q="select user_id from usermessage where name='$username' ";
$r=mysqli_query($dbc,$q);
$q1="select user_id from usermessage where password='$password' ";
$r1=mysqli_query($dbc,$q1);
if(mysqli_num_rows($r)==0){
echo'对不起，此用户名并未注册。请先<a href="register.php">注册</a>';
}else{
while($row=mysqli_fetch_array($r,MYSQLI_ASSOC)){
$user_id=$row['user_id'];
}
if(mysqli_num_rows($r1)==0){
echo"密码错误，请重新输入";
}else{
$_SESSION['username']=$username;
$_SESSION['user_id']=$user_id;
//$_SESSION=mysqli_fetch_array($r,MYSQLI_ASSOC);
echo"{$_SESSION['username']},欢迎您使用todolist. <br />";
echo"想进入到你的计划列表<a href=\"list.php\">请点击这里</a> <br />";
echo"<a href=\"logout.php\">注销</a>";
echo"<br />";
echo"<a href=\"changepassword.php\">更改密码</a>";
echo"<a href=\"index.php\">返回首页</a>";
}
}
mysqli_close($dbc);
exit();
}else{
echo'<h2> Error!</h2>
The following error(s) occurred:</br>';
foreach($error as $msg){
echo"$msg\n";
}
echo'<p>Please try again.</p>';
}
}
?>
<form action="login.php" method="POST">
用户名：<br />
<input type="text" name="username" />
<br />
密码：<br />
<input type="password" name="password" />
<br />
<input type="submit" value="登录" />
</form>
<a href="changepassword.php">更改密码</a>
<br />
<a href="index.php">返回首页</a>
</body>
</html>
而在jquery和ajax的应用中，我建立了三个脚本。
第一个login.php 此脚本用于创建html表单。代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>登录页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<p id="loginmessage"></p>
<form action="login.php" method="POST" id="login">
用户名：<br />
<input type="text" name="username" id="username" /><span id=usernameerror>请输入姓名</span>
<br />
密码：<br />
<input type="password" name="password" id="password"/><span id=passworderror>请输入密码</span>
<br />
<input type="submit" value="登录" />
<input type="reset" value="重置">
</form>
<a href="changepassword.php">更改密码</a>
<br />
<a href="index.php">返回首页</a>
</body>
</html>
第二个login_ajax.php 服务器端脚本，代码如下
<?php
if(isset($_GET['username'],$_GET['password'])){
$username=$_GET['username'];
$password=$_GET['password'];
session_start();
$dbc=@mysqli_connect('127.0.0.1', 'root','123456','todolist')
or die('could not connect to mysql');
mysqli_set_charset($dbc,'utf8');
$q="select user_id from usermessage where name='$username' ";
$r=mysqli_query($dbc,$q);
$q1="select user_id from usermessage where password='$password' ";
$r1=mysqli_query($dbc,$q1);
if(mysqli_num_rows($r)==0){
echo'usernamefail';
}else{
while($row=mysqli_fetch_array($r,MYSQLI_ASSOC)){
$user_id=$row['user_id'];
}
if(mysqli_num_rows($r1)==0){
echo"passwordfail";
}else{
$_SESSION['username']=$username;
$_SESSION['user_id']=$user_id;
echo"success";
}
}
mysqli_close($dbc);
exit();
}
?>
1， 验证从js中收到的用户名和密码
2， 开启一个会话，并连接数据库
3.从数据库中查找提交的用户名和密码，并根据不同的查找结果给出不同的服务器响应
第三个js中介 login.js
$(function(){
$("span").hide();
$("#login").submit(function(){
if($("#username").val().length>0){
username=$("#username").val();
}else{
$("#usernameerror").show();
}
if($("#password").val().length>0){
password=$("#password").val();
}else{
$("#passworderror").show();
}
if(username && password){
var data=new Object();
data.username=username;
data.password=password;
var option=new Object();
option.data=data;
option.dataType="text";
option.type="get";
option.success=function(response){
if(response=="success"){
//$("#login").hide();
//$("#loginmessage").text("恭喜你，登录成功.");
$("#loginmessage").html("恭喜你，登录成功</br><a href=\"list.php\">点此进入你的计划页表</a></br><a href=\"logout.php\">注销</a>");
//$("#registermessage").addClass("error");
}else if(response=="usernamefail"){
$("#loginmessage").text("对不起，此用户名并未注册");
//$("#registermessage").addClass("error");
}else if(response=="passwordfail"){
$("#loginmessage").text("密码输入错误");
//$("#registermessage").addClass("error");
}
};
option.url="login_ajax.php";
$.ajax(option);
}
return false;
});
});
- 获取表单中的数据，并进行简单的验证，若为空就显示提示信息
- 如果用户名和密码均布为空，那么接下来，我们就可以向服务器端脚本发送数据了。
- 首先将数据存储在data对象中，然后为发送的ajax对象设置属性。
dataType表示从服务器端返回的数据类型，
type表示发起请求的类型，或者是get,或者是post,默认是get
url表示请求应发送到的服务器端脚本，即处理请求的脚本。 - Success,这是一个回调函数，表示请求成功的时候会发生什么。定义了一个匿名函数，该匿名函数接受一个参数，服务器端脚本的响应，并将响应结果赋值给了response变量。不同的响应结果，js会对页面进行不同的更新。
$.ajax(option);执行请求 - 在实践中返回false，用于抑制浏览器默认的点击行为。我们希望在php代码中，采用的是我们通过jquery代码指定的动作，而不是默认的点击事件
- 在发送请求的时候，还有其他的方法或者写法
1）
var data=new Object();
data.username=username;
data.password=password;
$.ajax({
type:"GET",
url:"login_ajax.php",
data:data,
success:function(response){
if(response=="success"){
$("#loginmessage").html("恭喜你，登录成功</br><a href=\"list.php\">点此进入你的计划页表</a></br><a href=\"logout.php\">注销</a>");
}else if(response=="usernamefail"){
$("#loginmessage").text("对不起，此用户名并未注册");
}else if(response=="passwordfail"){
$("#loginmessage").text("密码输入错误"); //$("#registermessage").addClass("error");
}
}
});
2）
var data=new Object();
data.username=username;
data.password=password;
$.get(
"login_ajax.php",
data,
function (response){
/*if(response=="success"){
$("#loginmessage").html("恭喜你，登录成功</br><a href=\"list.php\">点此进入你的计划页表</a></br><a href=\"logout.php\">注销</a>");
}else if(response=="usernamefail"){
$("#loginmessage").text("对不起，此用户名并未注册");
}else if(response=="passwordfail"){
$("#loginmessage").text("密码输入错误");
}*/
$("#loginmessage").html(response);
}
);
网友评论