【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
(){
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
(
'post'
, 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);
},
dataType
:
'json'
})
});
});
<
/
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）跨域： 在不同源的网站之间，互相发送请求，称之为跨域
由后台程序员： (CORS)在header 处设置： Access-Control-Allow-Origin，则允许跨域访问（html5 才允许）
由前端程序员： （jsonp）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 + 异步请求，所以在验证用户名还没返回的响应的时候，用户已经输入密码了，这时密码也输完了，需要验证，我们要做的就是创建 两个请求对象，这样在回调函数就可以区分返回的响应对应的是哪一个请求的，但是这两个响应的顺序无从知晓，而要注册的条件是用户名和密码都复合要求，这时我们可以采取在两个请求的回调函数中添加 监视器函数，只有满足两者都复合时，才允许注册；
扫一扫
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
