【1】提交数据流程
——前端 (静态页面)
(1)用户输入
(2)点击提交
——后端(服务器执行的代码)
(1)接收数据
(2)查询数据
(3)生成页面返回给用户
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
link
rel
=
"stylesheet"
href
=
"./styles/bootstrap.min.css"
>
<
script
src
=
"./script/jquery.min.js"
>
<
/
script
>
<
script
src
=
"./script/bootstrap.min.js"
>
<
/
script
>
<
title
>第一个提交数据代码</
title
>
<
style
>
.photo
{
width
:
100
%
;
height
:
150
px
;
}
<
/
style
>
</
head
>
<
body
>
<!--
1、 访问数据库,获取数据——》假数据
2、解析数据
3、生成html结构
-->
<
div
id
=
"container"
>
<
div
class
=
"row"
>
<?php
include
'./ajax_3.1.php'
;
for
($i
=
0
; $i
<
count
($wanzi);$i
++
){
echo
'<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="'
.
$wanzi[
"丸子"
.
$i][
'href'
]
.
'" class="photo">
<div class="caption">
<h3>'
.
$wanzi[
"丸子"
.
$i][
'state'
]
.
'</h3>
<p>
<a href="./getData.php?love='
.
$wanzi[
"丸子"
.
$i][
'why'
]
.
'" class="btn btn-primary" role="button" >查询</a>
<a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>'
;
}
?
>
</
div
>
</
div
>
</
body
>
</
html
>
ajax_3.1.php :
<?php
// 二维数组
$wanzi
=
array
(
'丸子0'
=>
array
(
'href'
=>
'./imgs/1.jpg'
,
'state'
=>
'这是第一张'
,
'why'
=>
'美1'
),
'丸子1'
=>
array
(
'href'
=>
'./imgs/2.jpg'
,
'state'
=>
'这是第二章'
,
'why'
=>
'美2'
),
'丸子2'
=>
array
(
'href'
=>
'./imgs/3.jpg'
,
'state'
=>
'这是第三章'
,
'why'
=>
'美3'
),
'丸子3'
=>
array
(
'href'
=>
'./imgs/4.jpg'
,
'state'
=>
'这是第四张'
,
'why'
=>
'美4'
),
'丸子4'
=>
array
(
'href'
=>
'./imgs/5.jpg'
,
'state'
=>
'这是第五章'
,
'why'
=>
'美5'
),
'丸子5'
=>
array
(
'href'
=>
'./imgs/6.jpg'
,
'state'
=>
'这是第六张'
,
'why'
=>
'美6'
),
'丸子6'
=>
array
(
'href'
=>
'./imgs/7.jpg'
,
'state'
=>
'这是第七章'
,
'why'
=>
'美7'
),
'丸子7'
=>
array
(
'href'
=>
'./imgs/8.jpg'
,
'state'
=>
'这是第八章'
,
'why'
=>
'美8'
)
) ;
?
>
getData.php :
<?php
// 设置中文编码
header
(
'content-type:text/html;charset=utf-8'
);
// 1、取出name为love 的 value
$name
=
$_GET[
love
];
// 2、查询 数据库中为value的数据
echo
"查看的照片的原因 : "
.
$name;
//3、生成页面, 解析数据,创建html 数据结构并返回
?
>
【2】ajax 上传数据
(1)get 方式的总结:
——1. 数据是拼接在 url 中的,安全性不好
——2. 长度问题,一些服务器对于太长的 url 会直接屏蔽
——3. 优点就是测试方便
(2)post 方式的总结:
——1. 数据没有拼接在 url 中的,安全性比较好
——2. 长度没有限制
——3. 如果要上传文件必须使用 post
(3) 上传文件
<
body
>
<
form
action
=
"./postData.php"
method
=
"post"
enctype
=
"multipart/form-data"
>
<
input
type
=
"file"
name
=
"file_img"
/>
<
input
type
=
"submit"
>
</
form
>
</
body
>
postData.php :
<?php
// 设置中文编码
header
(
'content-type:text/html;charset=utf-8'
);
print_r
($_FILES);
/*
结果是: Array (
[file_img] => Array (
[name] => 7.jpg
[type] => image/jpeg
[tmp_name] => C:\Windows\Temp\php561E.tmp
[error] => 0
[size] => 95666 ) )
*/
// 把上传的照片存储:
move_uploaded_file
($_FILES[
'file_img'
][
'tmp_name'
],
'./imgs/'
.
$_FILES[
'file_img'
][
'name'
]) ;
?
>
—— enctype 属性
规定在发送到服务器之前应该如何对表单数据进行编码。
application/x-www-form-urlencoded | 在发送前编码所有字符(默认) |
multipart/form-data | 不对字符编码。 在使用包含文件上传控件的表单时,必须使用该值。 |
text/plain | 空格转换为 "+" 加号,但不对特殊字符编码。 |
(4) ajax 提交数据
步骤:
(1) 创建异步对象
(2) 请求行,get 方法需要在地址提交数据,post 不需要
(3) 请求行,get可省略, post 没有数据的时候也可以省略
(4) 回调函数 , 获取服务器返回的内容
(5) 请求发送
get :
<
body
>
<
h1
> 点击的时候发送请求报文,不需要刷新页面 </
h1
>
<
input
type
=
"button"
value
=
"点我发送"
>
<
script
>
document.
querySelector
(
'input'
).
onclick
=
function
(){
// 1 创建异步对象
var
xhr
=
new
XMLHttpRequest
();
// 2 设置请求行(get 请求的数据要写在 url 后面)
xhr.
open
(
'get'
,
'getData.php?name = cokie& taste= yummy'
);
// 3 设置请求头(get请求可以省略,post不发生数据的时候也可以省略)
xhr.
setRequestHeader
(
null
);
// 3.1 注册回调函数
xhr.
onload
=
function
(){
// 获取数据
console
.
log
(xhr.responseText);
}
// 4 请求主体的发送(get请求为空,或者null; post请求数据写在这里,如果没有直接为空或者 null)
xhr.
send
(
null
);
}
<
/
script
>
</
body
>
getData.php:
<?php
// 设置中文编码
header
(
'content-type:text/html;charset=utf-8'
);
print_r
($_GET);
?
>
post :
<
body
>
<
h1
> 输入密码,测试密码强度 </
h1
>
<
p
id
=
"strength"
></
p
>
<
input
type
=
"password"
id
=
"test"
/>
<
script
>
/*
输入密码,判断强度:
浏览器端: 当失去焦点事件,在不刷新页面的情况下发送请求, onload send()
服务器端: 接受输入的值,判断强度,返回不同的内容给用户
*/
document.
querySelector
(
'#test'
).
onblur
=
function
(){
// 0 修改页面的提示信息
// 1 创建异步对象
var
xhr
=
new
XMLHttpRequest
();
// 2 设置请求行(get 请求的数据要写在 url 后面)
xhr.
open
(
'post'
,
'postData.php'
);
// 3 设置请求头(get请求可以省略,post不发生数据的时候也可以省略)
xhr.
setRequestHeader
(
'Content-type'
,
'application/x-www-form-urlencoded'
);
// 3.1 注册回调函数
xhr.
onload
=
function
(){
// 获取数据
// console.log(xhr.responseText);
document.
getElementById
(
'strength'
).innerHTML
=
xhr.responseText;
}
// 4 请求主体的发送(get请求为空,或者null; post请求数据写在这里,如果没有直接为空或者 null)
// 这里最好不要有空格
xhr.
send
(
'password='
+
document.
getElementById
(
'test'
).value);
}
<
/
script
>
</
body
>
postData.php :
<?php
// 设置中文编码
header
(
'content-type:text/html;charset=utf-8'
);
$password
=
$_POST[
'password'
];
$score
=
0
;
$sum
=
0
;
$num
=
preg_match
(
'/[0-9]/'
, $password);
$alph
=
preg_match
(
'/[a-zA-Z]/'
, $password);
$fu
=
preg_match
(
"/[\'.,:;*?~`!@#$%^&+=)(<>{}]|
\]
|
\[
|\/|
\\
\|
\"
|\|/"
,$password);
$upper
=
preg_match
(
'/[A-Z]/'
, $password);
$lower
=
preg_match
(
'/[a-z]/'
, $password);
// 1 首先判断种类 , 1种——10, 2种——20, 3种——30分
if
($num
&&
$alph
&&
$fu){
$sum
=
test2
()
+
test3
()
+
30
;
}
else
if
( ($num
&&
!
$alph
&&
$fu)
||
(
!
$num
&&
$alph
&&
$fu)
||
($num
&&
$alph
&&
!
$fu)){
$sum
=
test2
()
+
test3
()
+
20
;
}
else
if
( (
!
$num
&&
!
$alph
&&
$fu)
||
(
!
$num
&&
$alph
&&
!
$fu)
||
($num
&&
!
$alph
&&
!
$fu)){
$sum
=
test2
()
+
test3
()
+
10
;
}
function
test2
(){
//2 判断密码的长度,5——10分,10——20分,>15——30分
if
(
count
($password)
<
5
){
$score
=
$score
+
10
;
}
else
if
(
count
($password)
>
5
&&
count
($password)
<
10
){
$score
=
$score
+
20
;
// }else if(count($password)>15){
}
else
if
(
count
($password)
>
15
){
$score
=
$score
+
30
;
}
else
{
$score
=
0
;
}
return
$score;
}
function
test3
(){
// 3 判断大小写,只有大写或小写:10分,混合:20分
if
($alph){
if
($upper
||
$lower){
$score
=
$score
+
10
;
}
else
if
($upper
&&
$lower){
$score
=
$score
+
20
;
}
}
return
$score;
}
// 数字:只有2个数字:10分, >2个:20分
// 符号:只有2个符号:10分, >2个:20分
if
( $sum
<
31
){
echo
$sum
.
'弱'
;
}
else
if
( $sum
>
31
&&
$sum
<
71
){
echo
$sum
.
'中'
;
}
else
if
( $sum
>
70
){
echo
$sum
.
'高'
;
}
?
>
onreadystatechange( ),的兼容性比好
// 状态码为4,才采取获取数据 且 响应码为200,即请求的页面存在,才采取获取数据
xhr.onreadystatechange
=
function
(){
if
(xhr.readyState
==
4
&&
xhr.status
==
200
){
document.
getElementById
(
'strength'
).innerHTML
=
xhr.responseText;
}
}
注意:
当在 php 文件 echo输出多个字符串的时候,所有的输出会连接成一个字符串,这时候需要对信息进行切割,变成一个数组,但是当数据很复杂的时候,采取字符串切割是不理想的,所以就通过 xml 文件,写成有格式的输出。
【3】 xml
实现 :
<
body
>
<
h1
> 点击,会出现某人的个人信息</
h1
>
<
input
type
=
"button"
value
=
"点我发送"
>
<
h2
> </
h2
>
<
script
>
// 实现点击按钮,从xml文件中取出相应的值
document.
querySelector
(
'input'
).
onclick
=
function
(){
// 1 创建异步对象
var
xhr
=
new
XMLHttpRequest
();
// 2 设置请求行(get 请求的数据要写在 url 后面)
xhr.
open
(
'get'
,
'../php/ajax_8.php'
);
// 3.1 注册回调函数
xhr.onreadystatechange
=
function
(){
// 获取数据
if
(xhr.readyState
==
4
&&
xhr.status
==
200
){
console
.
log
(xhr.responseText);
var
name
=
xhr.responseXML.
querySelector
(
'name'
).innerHTML;
console
.
log
(name);
var
age
=
xhr.responseXML.
querySelector
(
'age'
).innerHTML;
var
gender
=
xhr.responseXML.
querySelector
(
'gender'
).innerHTML;
var
all
=
name
+
'——'
+
age
+
'——'
+
gender;
document.
querySelector
(
'h2'
).innerHTML
=
all ;
}
}
// 4 请求主体的发送(get请求为空,或者null; post请求数据写在这里,如果没有直接为空或者 null)
xhr.
send
(
null
);
}
<
/
script
>
</
body
>
ajax_8.php :
<?php
// 设置中文编码
header
(
'content-type:text/xml;charset=utf-8'
);
// 注意: 这里要写绝对路劲,否则php 找不到这个文件
$xmlString
=
file_get_contents
(
'D:\phpStudyB\WWW\one\php\ajax_8.xml'
);
echo
$xmlString;
?
>
ajax_8.xml :
<?
xml
version
=
"1.0"
encoding
=
"UTF-8"
?>
<
root
>
<
name
>小菲</
name
>
<
age
>22岁</
age
>
<
gender
>性别:女</
gender
>
</
root
>
XML 缺点: 解析过程比较复杂,所以就又有了一种新的格式 JSON
【4】 JSON
特点:
(1) 是一种数据格式,
(2)与编程语言没有关系,
(3)JSON 的载体是字符串,
(4)基本上所有编程语言都支持 JSON,
(5)语法简单,基本上所有的编程语言都提供了相应的方法来解析 JSON ,
(6)JSON 格式的字符串,转化完毕之后,会变成数组对象;
格式:
(1)对象使用 { }
(2)属性名 必须使用“ ”包裹
(3)属性值 必须使用“ ”包裹(如果是数值,可以不包裹)
实现:
<
body
>
<
h1
> 点击的时候发送请求报文,不需要刷新页面 </
h1
>
<
input
type
=
"button"
value
=
"点我发送"
>
<
script
>
document.
querySelector
(
'input'
).
onclick
=
function
(){
// 1 创建异步对象
var
xhr
=
new
XMLHttpRequest
();
// 2 设置请求行(get 请求的数据要写在 url 后面)
xhr.
open
(
'get'
,
'getData.php?name = cokie& taste= yummy'
);
// 3 设置请求头(get请求可以省略,post不发生数据的时候也可以省略)
xhr.
setRequestHeader
(
null
);
// 3.1 注册回调函数
xhr.onreadystatechange
=
function
(){
// 获取数据
if
(xhr.readyState
==
4
&&
xhr.status
==
200
){
console
.
log
(xhr.responseText);
}
}
// 4 请求主体的发送(get请求为空,或者null; post请求数据写在这里,如果没有直接为空或者 null)
xhr.
send
(
null
);
}
<
/
script
>
</
body
>
ajax_9.json :
[
{
"name"
:
"小菲"
,
"age"
:
10
},
{
"name"
:
"小夏"
,
"age"
:
20
},
{
"name"
:
"小黑"
,
"age"
:
30
},
{
"name"
:
"小方块"
,
"age"
:
7
}
]
ajax_9.php :
<?php
// 设置编码,这里是可选的
header
(
'content-type:application/json;charset=utf-8'
);
// 注意: 这里要写绝对路劲,否则php 找不到这个文件
$jsonString
=
file_get_contents
(
'D:\phpStudyB\WWW\one\php\ajax_9.json'
);
echo
$jsonString;
?
>
【5】 ajax 工具函数的封装
<
body
>
<
script
>
function
get
(
url
,
data
,
success
) {
// 创建异步对象
var
xhr
=
new
XMLHttpRequest
();
if
(data) {
url
+=
"?"
;
url
+=
data;
}
// 请求行
xhr.
open
(
'get'
, url);
//(请求头省略),回调函数
xhr.onreadystatechange
=
function
() {
if
(xhr.readyState
==
4
&&
xhr.status
==
200
) {
success
(xhr.responseText);
// 普通字符
console
.
log
(xhr.responseText);
// xml
console
.
log
(xhr.responseXML);
// json
console
.
log
(
JSON
.
parse
(xhr.responseText));
}
}
// 发送请求
xhr.
send
(
null
);
}
function
post
(
url
,
data
,
success
) {
var
xhr
=
new
XMLHttpRequest
();
xhr.
open
(
'get'
, url);
if
(data){
xhr.
setRequestHeader
(
'Content-type'
,
'applictation/www-x-form-urlencoded'
);
}
xhr.onreadystatechange
=
function
() {
if
(xhr.readyState
==
4
&&
xhr.status
==
200
) {
success
(xhr.responseText);
// 普通字符
console
.
log
(xhr.responseText);
// xml
console
.
log
(xhr.responseXML);
// json
console
.
log
(
JSON
.
parse
(xhr.responseText));
}
}
xhr.
send
(data);
}
<
/
script
>
</
body
>
ajax.js :
/**
* 一代:ajax 工具函数 - get
*
@param
{*}
url
*
@param
{*}
data
(key1 = value1 & key2 = value2)
*
@param
{*}
success
*/
function
get
(
url
,
data
,
success
) {
var
xhr
=
new
XMLHttpRequest
();
if
(
data
) {
url
+=
"?"
;
url
+=
data
;
}
xhr
.
open
(
"get"
,
url
);
xhr
.onreadystatechange
=
function
() {
if
(
xhr
.readyState
==
4
&&
xhr
.status
==
200
) {
// 回调函数,success 的参数就输服务器返回的值,而在html 界面的data 即是服务器返回的值
success
(
xhr
.responseText);
}
};
xhr
.
send
(
null
);
}
/**
* 一代:ajax 工具函数 - post
*
@param
{*}
url
*
@param
{*}
data
(key1 = value1 & key2 = value2)
*
@param
{*}
success
*/
function
post
(
url
,
data
,
success
) {
var
xhr
=
new
XMLHttpRequest
();
xhr
.
open
(
"post"
,
url
);
if
(
data
) {
xhr
.
setRequestHeader
(
"Content-type"
,
"application/x-www-form-urlencoded"
);
}
xhr
.onreadystatechange
=
function
() {
if
(
xhr
.readyState
==
4
&&
xhr
.status
==
200
) {
success
(
xhr
.responseText);
}
};
xhr
.
send
(
data
);
}
/**
* 二代:ajax 工具函数 - post and post
*
@param
{*}
url
*
@param
{*}
type
*
@param
{*}
data
(key1 = value1 & key2 = value2)
*
@param
{*}
success
*/
// 整合 get and post
function
p_g
(
url
,
type
,
data
,
success
) {
var
xhr
=
new
XMLHttpRequest
();
if
(
type
==
"get"
&&
data
) {
url
+=
"?"
;
url
+=
data
;
data
=
null
;
}
xhr
.
open
(
type
,
url
);
if
(
type
==
"post"
&&
data
) {
xhr
.
setRequestHeader
(
"Content-type"
,
"application/x-www-form-urlencoded"
);
}
xhr
.onreadystatechange
=
function
() {
if
(
xhr
.readyState
==
4
&&
xhr
.status
==
200
) {
success
(
xhr
.responseText);
}
};
xhr
.
send
(
data
);
}
/**
* 三代:ajax 工具函数— 用户不需要记忆参数的顺序
*
@param
{*}
option
*/
function
ajax
(
option
) {
var
xhr
=
new
XMLHttpRequest
();
if
(
option
.type
==
"get"
&&
option
.data) {
option
.
url
+=
"?"
;
option
.
url
+=
option
.data;
option
.data
=
null
;
}
xhr
.
open
(
option
.type,
option
.
url
);
if
(
option
.type
==
"post"
&&
option
.data) {
xhr
.
setRequestHeader
(
"Content-type"
,
"application/x-www-form-urlencoded"
);
}
xhr
.onreadystatechange
=
function
() {
if
(
xhr
.readyState
==
4
&&
xhr
.status
==
200
) {
var
type
=
xhr
.
getResponseHeader
(
"Content-type"
);
if
(
type
.
indexOf
(
"json"
)
!=
-
1
) {
option
.
success
(
JSON
.
parse
(
xhr
.responseText));
}
if
(
type
.
indexOf
(
"xml"
)
!=
-
1
) {
option
.
success
(
xhr
.responseXML);
}
option
.
success
(
xhr
.responseText);
}
};
xhr
.
send
(
option
.data);
}
【6】 模板引擎
<
body
>
<
div
id
=
"content"
></
div
>
<!-- 1 导入的模板引擎 -->
<
script
src
=
"../script/template.js"
>
<
/
script
>
<!-- 2 定义模板 (模板里面的内容都是文本来的,不是js 格式的代码)
-->
<
script
type
=
"text/html"
id
=
"template"
>
<
ul
>
<!-- 加 @ 可以原文输出,例如把图片输出 -->
{{each list as value i}}
<
li
>图片 {{i + 1}} :{{@value}}</
li
>
{{/each}}
</
ul
>
</
script
>
<!-- 3 填模板 -->
<!-- 4 使用 -->
<
script
>
var
data
=
{
list: [
'<img src="../imgs/1.jpg" />'
,
'<img src="../imgs/2.jpg"/>'
,
'<img src="../imgs/3.jpg"/>'
,
'<img src="../imgs/4.jpg"/>'
]
};
var
html
=
template
(
'template'
, data);
document.
getElementById
(
'content'
).innerHTML
=
html;
<
/
script
>
</
body
>
模板引擎的原理 :
(1) 通过 id 获取模板中的内容 =》 字符串
(2) 调用方式: 找到字符串中的特殊符号 =》正则表达式 , 使用对象对应的属性进行替换
(3) 返回字符串
模板引擎的封装:
my_template.js :
/**
* 模板引擎的封装
*
@param
{*}
id
*
@param
{*}
data
*/
function
my_template
(
id
,
data
) {
var
str
=
document.
querySelector
(
"#"
+
id
).
innerHTML
;
// 3 替换模板中的内容
var
reg
=
/{{(
\w
+
)}}/
;
// 索引到以字母开头的字符串
var
result
=
reg
.
exec
(
str
);
// 当所有要替换的内容都被替换
while
(
result
) {
// 把模板中的,每个英文开头的字符串替换为自己对象中的内容
str
=
str
.
replace
(
result
[
0
],
data
[
result
[
1
]]);
// 再次检索
result
=
reg
.
exec
(
str
);
}
return
str
;
}
art-temptilate :
还有 逻辑语句、原文输出、循环语句。。。。语法,可以去查文档
实践 : smzdm.html
【7】 jQuery_ajax
<
body
>
<
input
type
=
"button"
id
=
"b_xml"
value
=
"jq_ajax_xml"
/>
<
input
type
=
"button"
id
=
"b_json"
value
=
"jq_ajax_json"
/>
<
script
src
=
"../script/jquery-3.2.1.js"
>
<
/
script
>
<
script
>
// jq 也有封装了ajax
$
(
function
(){
$
(
'#b_xml'
).
click
(
function
(){
$.
ajax
({
url:
'../php/jq_xml.php'
,
// data 在不传参数的时候可以省略 、type也可以省略,还有很多别的参数
success
:
function
(
data
){
console
.
log
(data);
},
// 如果在php 文件没有设置文件的格式,这里可以认为的设置
dataType:
'xml'
})
});
});
$
(
function
(){
$
(
'#b_json'
).
click
(
function
(){
$.
ajax
({
url:
'../php/jq_json.php'
,
// data 在不传参数的时候可以省略 、type也可以省略,还有很多别的参数
success
:
function
(
data
){
console
.
log
(data);
},
})
});
});
<
/
script
>
</
body
>
—— $ document.ajaxStart( ) 与 $ document.ajaxStop( )
每次调用 ajax 的方法,可以在调用开始和结束调用的方法内定义方法;
【8】ajax + 模板引擎 + 瀑布流 实验 :
思路:
(1) 点击查看图片按钮,在不刷新页面的情况下,按钮的内容显示“....”,当服务器响应后,显示图片,按钮恢复
(2) 在回调函数中,数据获取之后,按照模板引擎,渲染到页面上
(2-1) 按照瀑布流来实现布局
(4) 页码与分页,和点击下一页的相关事件(还没实现)
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=height, initial-scale=1.0"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
title
>模板引擎实战——瀑布流</
title
>
<
link
href
=
"../styles/masonry.css"
rel
=
"stylesheet"
>
</
head
>
<
body
>
<
p
id
=
"look"
>查看</
p
>
<
div
class
=
"grid"
>
</
div
>
<!-- JQ -->
<
script
src
=
"../script/jquery-3.2.1.js"
>
<
/
script
>
<!-- 导入瀑布流插件 -->
<
script
src
=
"../script/masonry.pkgd.js"
>
<
/
script
>
<!-- 导入自己封装的模板引擎 -->
<
script
src
=
"../script/template.js"
>
<
/
script
>
<!-- 定义模板 -->
<
script
type
=
"text/html"
id
=
"template"
>
{{each data}}
<
div
class
=
"model grid-item"
>
<
img
src
=
"{{$value.path}}"
/>
<
p
>{{$value.text}}</
p
>
</
div
>
{{/each}}
</
script
>
<!-- 触发事件,填充模板 -->
<
script
>
$
(
function
() {
var
mypage
=
1
;
$
(
'#look'
).
click
(
function
() {
$
(
this
).
html
(
'.'
);
var
$this
=
$
(
this
);
var
inter
=
setInterval
(
function
() {
var
oldstr
=
$this.
html
();
if
(oldstr.length
>
6
) {
oldstr
=
''
;
}
oldstr
+=
'.'
;
$this.
html
(oldstr);
},
100
);
$.
ajax
({
url:
'../php/masonry.php'
,
data: {
currentPage: mypage,
pageSize:
6
},
success
:
function
(
data
) {
console
.
log
(data);
//清除计时器
clearInterval
(inter);
$
(
'#look'
).
html
(
'当前页是: '
);
// 渲染页面
var
result
=
template
(
'template'
, data);
// jq -> dom,这里要转换是因为,append(ele)参数是一个元素,并不是一个字符串
var
$dom
=
$
(result);
console
.
log
(result);
// $('.grid').append(result);
//加入瀑布流插件
$
(
'.grid'
).
masonry
({
// options
itemSelector:
'.grid-item'
,
// 列宽
columnWidth:
180
}).
append
($dom).
masonry
(
'appended'
, $dom).
masonry
();
mypage
++
;
// 如果是下面的写法,只是把模板加到页面,并没有加到瀑布流插件里面
// $('.grid').append(result);
// $('.grid').masonry({ itemSelector: '.grid-item',
// // 列宽 columnWidth: 180 });
}
});
});
});
<
/
script
>
</
body
>
</
html
>
【9】同源、异域
(1)同源: 协议名、端口号、地址都一样
不同源: 协议名、端口号、地址 中有一个不相同
(2)跨域: 在不同源的网站之间,互相发送请求,称之为跨域
由后台程序员: 在header 处设置: Access-Control-Allow-Origin,则允许跨域访问(html5 才允许)
由前端程序员: JSONP (json with padding),jsonp利用src 属性,支持跨域获取资源
——为什么要跨域: 服务供应商提供给其他公司的服务,例如天气查询,火车票查询等 ;或者在自己127.0.0.1 访问其他网
站的图片或url
—— dom 元素的src 属性支持跨域获取资源,
—— jsonp 原理:(1 ) script 标签的 src 发送跨域请求
(2) script 标签后面写上要请求的页面,发送了一个方法的名字到服务器
(3) 服务器接收到名字之后,拼接一个方法的调用,在参数中传入了需要给浏览器的数据
(4) 返回给浏览器把它当做 js 解析
特点: (1) jsonp 不能发 post 请求,因为要传参数,只能用 get
(2) jsonp 与 ajax 没有关系
【10】 head first ajax
——创建请求对象的3种方式
—— 请求对象的各种属性
——验证用户名和密码 (page 200—213)
验证用户名要求: 用户名唯一,用户名符合条件是 注册的之一
验证密码要求 : 要求验证两次密码,其中包括密码的组成和两次密码是否相同
问题: 因为是通过ajax + 异步请求,所以在验证用户名还没返回的响应的时候,用户已经输入密码了,这时密码也输完了,需要验证,我们要做的就是创建两个请求对象,这样在回调函数就可以区分返回的响应对应的是哪一个请求的,但是这两个响应的顺序无从知晓,而要注册的条件是用户名和密码都复合要求,这时我们可以采取在两个请求的回调函数中添加监视器函数,只有满足两者都复合时,才允许注册;