Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery中的Ajax操作--2018-9-19
Blogger Information
Blog 38
fans 0
comment 0
visits 23423
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery中的Ajax操作--2018-9-19
晓明的博客
Original
743 people have browsed it

一:基础知识点

      一、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>

运行实例 »

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

7.

  

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post