jQuery中的Ajax操作--2018-9-19 - 作业提交

首页 > 博客列表 > jQuery中的Ajax操作--2018-9-19

博主信息

博文 38

粉丝 0

访问量 29689

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

jQuery中的Ajax操作--2018-9-19

晓明的博客

原创

917人浏览过

一:基础知识点

      一、Ajax知识回顾
    1.Ajax是英文 Asynchronous JavaScript and XML,异步的javascript和xml的简称;
    2.主要用于不刷新或页面跳转的情况下,发送另一个http请求,动态更新当前页面中的数据,
      使用户始终停留在当前页面,提升用户体验;
    3.js原生提供一个对象: XMLHttpRequest()可以完成Ajax的所有操作,但操作很繁琐,且容易出错;
    4.jQuery将常用的Ajax操作进行的封装,提供一套简单的接口,来简化用户的Ajax请求;
    5.Ajax主要涉及二类http请求: GET 和 POST ,GET用于从服务器获取数据,POST用于向服务器发送数据;
    5.原生的Ajax请求,请大家参考前面的课程,这套课程主要是讲述jQuery中的Ajax请求是如何实现的。

----------------------------------------------------------------------------------------

二、load()方法
    1.这是jQuery中最简单的Ajax请求方法,默认为GET请求方式;
    2.语法: load(url[,data,callback]),load(请求的url地址,请求数据,请求成功后回调函数);
            (1).url: 请求的服务器上的资源的url地址,可以是一个txt,html,php....
            (2).data:
                    [1]. GET请求: 无参数或是名值对格式字符串;
                    [2]. POST请求: 对象或数组;
            (3).function(data,statuStr,xhr), function(响应文本,状态字符串(success),xhr对象)
    3.调用: 该方法需要在jQuery对象上调用,回调适用于jQuery集合中每一个元素,例如: $('#box').load(...);
    4.优势:
        (1).自动参数自动判断请求类型是GET还是POST;
        (2).可直接将load()返回值做为DOM元素内容自动插入,省去了append()等DOM操作
    5.返回: 响应的内容;

-----------------------------------------------------------------------------------------

三、$.get()函数
    1.$.get(),用于从服务器上读取内容
    2.语法:$.get(url[,data][,callback][,dataType])
    3.url: 服务器上的url地址,为空表示当前地址;
    4.data:
        (1).查询字符串格式: name=peter&age=88;
        (2).对象字面量: {name:'peter',age:88},自动序列化为上面的查询字符串;
    5.callback: 请求成功的回调函数,function(响应文本,状态字符串,xhr对象),如果不需要回调,可设为null;
    6.dataType: 响应内容类型/应答消息体, html/text/xml/json/script/jsonp;
    7.返回值: 返回xhr对象

-----------------------------------------------------------------------------------------

四、$.getJSON()函数
    1. $.getJSON()专用于解析从服务器上返回的json格式的内容;
    2. 其实它就是$.get()函数中,将返回数据类型dataType设置为'json'格式时的简写函数;
    3. $.getJSON()需要读取json格式的数据,为简化起见,我直接创建了一个json文件,实际开发中应该从接口获取;

-----------------------------------------------------------------------------------------

五、$.getScript()函数
    1. $.getScript()用于动态加载外部的javascript脚本文件;
    2. $.getScript(脚本地址,成功回调);
    3. 可以任何位置加载外部脚本

-----------------------------------------------------------------------------------------

六、$.post()函数
    1. $.post()用于向服务器发送大量的,敏感的信息(信息在消息体中而非url地址中)
    2. $.post(url[,data][,callback][,dataType]),参数与$.get()相同
    3. url: http请求的url处理程序;
    4. data: 消息体中的数据,以查询字符串或对象字面量形式提供;
    5. callback: 成功后的回调方法,function(data,status,xhr){...};
    6. dataType: 期望服务器端响应返回的数据格式,如html,json,text,xml,_default...

------------------------------------------------------------------------------------------

七、$.ajax()函数
    1.学完前面的知识,$.ajax()就显得非常简单了;
    2.load(),$.get(),$.getJSON(),$.getScript(),$.post()其实都是$.ajax()快捷方式罢了;
    3.$.ajax()的参数是一个对象,键名对应的属性非常多,并且键名不允许自定义,很多之前我们已经学过了;
    4.尽管参数很多,但实际开发中,经常用到的并不多,大家不必太纠结,有的参数用到了再查手册也不迟;
    5.常用属性:
        (1). url : 请求的url资源地址;
        (2). type: 请求的类型,get / post;
        (3). data: 发送的参数;
        (4). dataType: 响应的数据类型;
        (5). success: 响应成功的回调方法;
    6.该方法是jQuery中Ajax的底层实现,前面的方法或函数其实都在它基础实现的功能封装;
    下面我们将$.post()中的登录验证功能,使用$.ajax()进行改写
------------------------------------------------------------------------------------------

二.具体实例

1. load --post请求实例 detail.php, school.php服务器文件

实例

一.html请求文件
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>load()方法</title>
</head>
<body>
    <h3>江湖门派查询系统load()</h3>
    <label for="school">请选择:</label>
    <select name="school" id="school"></select>
    <p id="detail"></p>
    <script src="../lib/jquery.js"></script>
    <script>
        $('#school')    // 获取下拉列表
            .load('inc/school.php') //从服务器获取数据
            .change(function (event) {
                $('#detail').load(
                    //事件处理的脚本
                    'inc/detail.php',
                    // 发送到服务器上的数据
                    {key: $(event.target).val()},
                    // 成功后的回调处理方法
                    function () {
                        // console.log($(event.target).val())
                        $('[value=""]').remove();
                    }
                );
            })
    </script>
</body>
</html>

二.school.php
   
  <?php
$schools = ['丐帮', '古墓派', '峨眉派'];
//echo json_encode($schools);die;
$option = '<option value="">请选择</option>';
foreach ($schools as $key => $value) {
    $option .= "<option value='{$key}'>{$value}</option>";
}
echo $option;

三.detail.php
  
  <?php
$detail = [
  0=>'<img src="inc/images/1.jpg" width="200px"><h3>帮主:黄蓉,绝招:《打狗棒法》</h3>' ,
  1=>'<img src="inc/images/2.jpg" width="200px"><h3>帮主:小龙女,绝招:《玉女剑法》</h3>' ,
  2=>'<img src="inc/images/3.jpg" width="200px"><h3>帮主:周芷若,绝招:《九阴真经》</h3>' ,
  3=>'<img src="inc/images/4.jpg" width="200px"><h3>帮主:严晓明,绝招: 逃跑</h3>' ,
];
//$_POST['key']: 返回键名
echo $detail[$_POST['key']];
// echo $detail[$_GET['key']];

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.get请求

实例

1.提交请求
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.get()函数</title>
</head>
<body>
<h3>江湖门派查询系统$.get()</h3>
<label for="school">请选择:</label>
<select name="school" id="school"></select>
<p id="detail"></p>
<script src="../lib/jquery.js"></script>
<script>
    $.get('inc/school.php',function (data, status, xhr) {
        // console.log(data);
        // console.log(status);
        // console.log(xhr);
        if (status === 'success') {
            // $('#school').html(data);
            $(data).appendTo('#school');
        }

    });

    $('#school').change(function (event) {
        // console.log($(this).serialize());
        $.get(
            //请求的Url地址
            'inc/detail.php',
            //请求数据
            {key: $(event.target).val()},
            //请求成功的回调
            function (data, status) {
                if (status === 'success') {
                    $('#detail').html(data);
                    $('[value=""]').remove();
                } else {
                    $('#detail').html('<span style="color:red">请求失败</span>');
                }
            }
        );
    })



</script>
</body>
</html>

  2.shool.php
   <?php
$schools = ['丐帮', '古墓派', '峨眉派'];
//echo json_encode($schools);die;
$option = '<option value="">请选择</option>';
foreach ($schools as $key => $value) {
    $option .= "<option value='{$key}'>{$value}</option>";
}
echo $option;

  3.detail.php
<?php
$detail = [
  0=>'<img src="inc/images/1.jpg" width="200px"><h3>帮主:黄蓉,绝招:《打狗棒法》</h3>' ,
  1=>'<img src="inc/images/2.jpg" width="200px"><h3>帮主:小龙女,绝招:《玉女剑法》</h3>' ,
  2=>'<img src="inc/images/3.jpg" width="200px"><h3>帮主:周芷若,绝招:《九阴真经》</h3>' ,
  3=>'<img src="inc/images/4.jpg" width="200px"><h3>帮主:严晓明,绝招: 逃跑</h3>' ,
];
//$_POST['key']: 返回键名
// echo $detail[$_POST['key']];
echo $detail[$_GET['key']];

运行实例 »

点击 "运行实例" 按钮查看在线实例

3.getjson案例

实例

1.请求页面
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.getJSON()函数</title>
</head>
<body>
<h3>江湖门派查询系统$.getJSON()</h3>
<label for="school">请选择:</label>
<select name="school" id="school"></select>
<p id="detail"></p>
<script src="../lib/jquery.js"></script>
<script>
    // 1. $.getJSON()专用于解析从服务器上返回的json格式的内容;
    // 2. 其实它就是$.get()函数中,将返回数据类型dataType设置为'json'格式时的简写函数;
    // 3. $.getJSON()需要读取json格式的数据,为简化起见,我直接创建了一个json文件,实际开发中应该从接口获取;

    $.getJSON('inc/schools.json',function (data, status) {
        if (status === 'success') {
            //默认的显示内容
            let option = '<option value="">请选择</option>';
            // console.log(data);
            $.each(data, function(i){// $.each()专用来遍历对象或数组的全局函数
                console.log(data[i]);
                option += '<option value="'+i+'">'+data[i]+'</option>';
            });
            console.log(option);
            // 将拼装好的html代码添加到<select>中
            $('#school').html(option);

        }

    });

    $('#school').change(function (event) {
        // console.log($(this).serialize());
        $.get(
            //请求的Url地址
            'inc/detail.php',
            //请求数据
            {key: $(event.target).val()},
            //请求成功的回调
            function (data, status) {
                if (status === 'success') {
                    $('#detail').html(data);
                    $('[value=""]').remove();
                } else {
                    $('#detail').html('<span style="color:red">请求失败</span>');
                }
            }
        );
    })



</script>
</body>
</html>

 2.schools.json
    ["丐帮", "古墓派", "峨眉派"]

运行实例 »

点击 "运行实例" 按钮查看在线实例

4.getScript实例

实例

1.提交页面
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../lib/jquery.js"></script>
<script>
    // 在页面中使用js运用的创建一个按钮
    $.getScript('inc/demo.js',function () {
        // 将按钮设置为淡出
        // $('button').fadeOut(3000);
        $('button').fadeTo(3000,0.3);
    });
</script>
</body>
</html>

2.demo.js页面
   $('<button></button>')
    .html('动态加载脚本')
    .width(150)
    .height(150)
    .css('background-color','yellow')
    .appendTo('body');

运行实例 »

点击 "运行实例" 按钮查看在线实例

5.post在验证

1.提交界面

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.post()</title>
</head>
<body>
<h3>用户登录$.post()</h3>
<p>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">

</p>
<p>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
</p>

<p><button>提交</button></p>
<script src="../lib/jquery.js"></script>
<script>
    $('button').click(function () {
        //邮箱的非空验证
        if ($('#email').val().length === 0) {
            $('#email').after('<span style="color:red">邮箱不能为空</span>')
                .next().fadeOut(3000);
            $('#email').focus(); // 设置焦点
            return false;
        }

        //密码的非空验证
        if ($('#password').val().length === 0) {
            $('#password').after('<span style="color:red">密码不能为空</span>')
                .next().fadeOut(3000);
            $('#password').focus(); // 设置焦点
            return false;
        } else  if ($('#password').val().length < 6) {
            $('#password').after('<span style="color:red">密码长度不能少于6位</span>')
                .next().fadeOut(3000);
            $('#password').focus(); // 设置焦点
            return false;
        }

        $.post(
            //处理请求的脚本
            'inc/check.php',
            //要发送到服务器上的数据
            {
                email: $('#email').val(),
                password: $('#password').val()
            },
            // 响应成功的回调
            function (data) {
                console.log(data);
                if (data.status == 1) {  // 验证通过
                    $('button')
                        .after('<span style="color:green"></span>')
                        .next()  // 切换到span
                        .html(data.message)  // 填充span内容
                        .fadeOut(2000);
                } else {
                    $('button')
                        .after('<span style="color:red"></span>')
                        .next()  // 切换到span
                        .html(data.message)  // 填充span内容
                        .fadeOut(2000);
                }

            },
            //响应数据的类型
            'json'
        );
    });
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.check.php

实例

<?php
//echo json_encode('测试数据');

// 连接数据库并验证用户
$email = htmlspecialchars(trim($_POST['email']));
$password = sha1(htmlspecialchars(trim($_POST['password'])));

$pdo = new PDO('mysql:host=127.0.0.1;dbname=phpcn','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`=:email  AND `password`=:password ";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email,'password'=>$password]);
if ($stmt->fetchColumn(0) == 1) {
    $status = 1;
    $message = '验证通过';
} else {
    $status = 0;
    $message = '邮箱或密码错误';
}

echo json_encode(['status'=>$status, 'message'=>$message]);

运行实例 »

点击 "运行实例" 按钮查看在线实例

6.ajax实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.ajax()</title>
</head>
<body>
<h3>用户登录$.ajax()</h3>
<p>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">

</p>
<p>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
</p>

<p><button>提交</button></p>
<script src="../lib/jquery.js"></script>
<script>
    $('button').click(function () {
        //邮箱的非空验证
        if ($('#email').val().length === 0) {
            $('#email').after('<span style="color:red">邮箱不能为空</span>')
                .next().fadeOut(3000);
            $('#email').focus(); // 设置焦点
            return false;
        }

        //密码的非空验证
        if ($('#password').val().length === 0) {
            $('#password').after('<span style="color:red">密码不能为空</span>')
                .next().fadeOut(3000);
            $('#password').focus(); // 设置焦点
            return false;
        } else  if ($('#password').val().length < 6) {
            $('#password').after('<span style="color:red">密码长度不能少于6位</span>')
                .next().fadeOut(3000);
            $('#password').focus(); // 设置焦点
            return false;
        }

        $.ajax({  // 参数必须是对象
            type: 'post', // 请求类型
            url: 'inc/check.php', // 请求的脚本
            // data: 'email='+$('#email').val()+'&password='+$('#password').val(),
            data: {             // 请求数据
                email: $('#email').val(),
                password: $('#password').val()
            },
            dataType: 'json',
            success: function (data) {
                console.log(data);
                if (data.status == 1) {  // 验证通过
                    $('button')
                        .after('<span style="color:green"></span>')
                        .next()  // 切换到span
                        .html(data.message)  // 填充span内容
                        .fadeOut(2000);
                } else {
                    $('button')
                        .after('<span style="color:red"></span>')
                        .next()  // 切换到span
                        .html(data.message)  // 填充span内容
                        .fadeOut(2000);
                }

            }
        });
    });
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

对象基础与MySQLi对象编程---2018-8-31

2018-08-31 14:41:58