AJAX学习第二天

在jQuery中的Ajax

​ 首先要引用jquery-1.12.2.min.js文件

$.ajax({这里传入一个字面量对象}) 参数说明
url 接口地址
type 请求方式
timeout 请求超时，单位是毫秒
dataType 服务器返回的格式, json / xml / jsonp
data 发送请求的数据
beforeSend: fucntion() { …code } 请求发起前的调用
success: fucntion() { …code } 成功响应后的调用
error: fucntion() { …code } 错误响应时的调用，e参数为报错信息
complete: fucntion() { …code } 响应完成时的调用

​ 完整的jQuery调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$.ajax({
    type: 'post',
    url: './server/nav-json.php',
    data: {}, //请求需要传递的参数
    // 设置请求超时:单位为毫秒，如果服务器的响应时间超过指定的时候，请求失败
    timeout: 3000,
    dataType:'json', // 设置响应数据的格式  xml json text html script jsonp
    // 发送请求之前的回调
    beforeSend:function(){
        // 在这个回调函数中，如果return false,那么本次请求会中止
        // return false;
    },
    success: function() {
        //请求成功之后的回调
    }, 
    // 请求失败之后的回调
    error:function(e){
        if(e.statusText == "timeout"){
        	alert("请求超时，请重试");
        }
    },
    // 无论请求是成功还是失败都会执行的回调
    complete:function(){
    	console.log('实现一些全局成员的释放，或者页面状态的重置....');
    }
});

注册案例

案例要达到的效果

register

准备1：获取验证码的getCode.php文件
1
2
3
4
5
6
7
<?php
    $arr = array('12345','23456','34567','45678');
    /*生成一个随机索引  array_rand:可以生成指定的数组长度内的索引*/
    $index = array_rand($arr);
    sleep(2);
    echo $arr[$index];
?>
准备2：数据的data.json文件
1
2
3
4
5
[
  {"name":"jack","pass":"rose","mobile":"12345678901"},	
  {"name":"rose","pass":"123","mobile":"12345678902"},
  {"name":"tom","pass":"123","mobile":"12345678909"},
]
准备3：验证用户名是否存在的validataUsername.php文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
    if($_SERVER['REQUEST_METHOD'] == 'GET'){
        /*1.读取文件*/
        $dataStr = file_get_contents('data.json');
        /*2.转换为数组，因为我们需要判断数组中的成员的name属性是否是指定的用户名--遍历*/
        $dataArr = json_decode($dataStr);
        /*3.遍历*/
        for($i=0;$i<count($dataArr);$i++){
            if($dataArr[$i] -> name == $_GET['name']){
                $arr = array(
                    'code'=>0, //状态码
                    'msg'=>'用户名已存在' //状态信息
                );
                echo json_encode($arr);
                return;
            }
        }
    }
?>
准备4：收集用户数据，实现上传和写入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
    $name = $_POST['name'];
    $pass = $_POST['pass'];
    $mobile = $_POST['mobile'];
    /*创建需要进行存储的当前用户注册对象*/
    $obj = array(
        'name' => $name,
        'pass' => $pass,
        "mobile" => $mobile
    );
    /*php无法直接将一个数据存储到文件，它需要先将数据写入到数组，再将数组写入到文件*/
    $arr = file_get_contents('data.json'); //字符串
    $dataArr = json_decode($arr); //将json格式字符串转换为php数组
    /*向数组中添加数据*/
    $dataArr[] = $obj;
    /*将数据写入到文件，写入到文件的数据只能是字符串*/
    $resultStr = json_encode($dataArr); //将数组转换为json格式字符串
    file_put_contents('data.json',$resultStr);
    
    echo json_encode(array('code'=>1,"msg"=>'注册成功'));
?>
准备5：在前端页面引入jQuery文件

​ 引入jQuery文件，创建开始任务的js标签

1
2
3
4
5
6
<script src="jquery-1.12.2.min.js" ></script>
<script>
  	// 1.0 获取验证码
  	// 2.0 完成验证操作
  	// 3.0 提交表单，进行上传操作
</script>

实现获取验证码

​ 步骤1： 为按钮添加单击事件

​ 步骤2：收集手机号，向服务器发送获取验证码的请求

​ 步骤3：接收验证码，给出响应的提示信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(".name").on("blur", function() {
  	var name = $(this).val();
  	$.ajax({
      	type: "get",
      	url: "./server/validataUsername.php",
      	data: {"name":name},
      	dataType: "json", // 接收到的就是一个js的对象，不然就是一个字符串
      	success: function(res) {
          	// console.log(res)
            if(res && res.code == 0) {
              	$(".tips > p").text(res.msg).fadeIn().delay(2000).fadeOut()
            }
      	}
  	})
})

实现注册

​ 步骤1：添加注册事件

​ 步骤2：收集用户数据

​ 步骤3：发起ajax请求

​ 步骤4：接收响应，给出提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(".submit").on("click", function() {
  	if($(this).hasClass("disabled")) {
      	return;
  	}
  	// 通过表单序列化的方式来收集用户数据
  	var data = $("#ajaxForm").serialize();
  	$.ajax({
      	type: "post",
      	url: "./server/register.php",
      	data: data,
      	dataType: "json",
        beforeSend: function() {
          	// 用户输入合法的验证
          	// 如果验证通过，开启节流阀，避免重复提交
          	$(".submit").addClass("disabled").val("正在注册中");
      	},
      	success: function(res) {
          	if(res && res.code == 1) {
              	$(".tips > p").text(res.msg).fadeIn().delay(2000).fadeOut()
          	}
      	},
      	error: function() {
          	$(".tips > p").text("注册失败").fadeIn().delay(2000).fadeOut()
      	}, // 不管成功还是失败都会执行
      	complete: function() {
          	$(".submit").removeClass("disabled").val("注册");
      	}
  	})
})

在php文件后添加一句

1
echo json_encode(array('code'=>1, 'msg'=>'注册成功'));
jquery的表单序列化方法
$(“#ajaxForm”).serialize();
可以将表单中所有name属性的表单元素的值收集，生成key=value&key=value
在ajax中，支持两种格式的参数(1，对象，2，参数格式字符串)

art-template模板引擎

模板引擎的2种语法

原生语法

  • 步骤1：引入文件

    1
    <script src="./js/template-native.js"></script>

    ​

  • 步骤2：创建模板数据

    1
    2
    3
    4
    5
    6
    7
    8
    <script type="text/template" id="navTemp">
    	<li>
      		<a href="#">
      			<img src="<%= src %>" alt="">
      			<p><%= text %></p>
      		</a>
      	</li>
    </script>

    ​

  • 步骤3：调用模板引擎

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
    	var obj = {
          	"src": "./images/nav-1.png",
          	"text": "京东超市"
    	}
        // 调用函数  templete(模板id, 数据(对象))  返回替换后的DOM结构
        var html = template(navTemp, obj);
      	document.querySelector("ul").innerHTML = html;
    </script>

    ​

​

​

​

​

​

本文标题:AJAX学习第二天

文章作者:Super Deng

发布时间:2019-02-16, 17:58:41

最后更新:2019-02-21, 20:52:13

原始链接:http://yoursite.com/2019/02/16/AJAX学习第二天/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 在jQuery中的Ajax
  2. 2. 注册案例
    1. 2.0.0.1. 准备1：获取验证码的getCode.php文件
  3. 2.0.1. 准备2：数据的data.json文件
  4. 2.0.2. 准备3：验证用户名是否存在的validataUsername.php文件
  5. 2.0.3. 准备4：收集用户数据，实现上传和写入
  6. 2.0.4. 准备5：在前端页面引入jQuery文件
  • 2.1. 实现获取验证码
  • 2.2. 实现注册
  • 3. art-template模板引擎
    1. 3.1. 模板引擎的2种语法
      1. 3.1.1. 原生语法
    • |