请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

jQuery 封装好的 Ajax的使用

 
ajax() 方法用于执行 AJAX(异步 HTTP)请求。

语法
$.ajax({name:value, name:value, ... })
jQuery 调用 ajax 方法
格式:$.ajax({});

参数:

type:请求方式GET/POST
url: 请求地址 url
async:是否一步,默认是 true 表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用此函数
error:请求失败时调用此函数

使用 AJAX 请求改变 <div> 元素的文本:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
        $("button").click(function(){
                $.ajax({url:"demo_test.txt",success:function(result){
                        $("#div1").html(result);
                }});
        });
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取其他内容</button>
</body>
</html>

按钮点击输入数据案例分析:
我们给 button 按钮绑定了一个点击事件,当点击时,我们就把数据设置到一个无序列表中,然后追加到 body 标签里面,就可以在页面看到数据,整体页面是没有刷新的(不会闪一下,增强了用户交互体验感)
代码如下:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$.ajax</title>
    </head>
    <body>
        <button id="bt">查询数据</button>
    </body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $('#bt').click(function () {
            $.ajax({
                type: "get",        // 请求方式
                url: "js/data.txt", // 请求路径
                dataType: "json",   // 预期返回一个 json 类型数据
                success: function (data) {   // data是形参名,代表返回的数据
                    // Dom 操作
                    // 创建 ul
                    var ul = $('<ul></ul>');
                    // 遍历 data
                    for (let i = 0; i < data.length; i++) {
                        // 创建 li
                        var li = '<li>' + data.userName + '</li>';
                        // 将 li 追加到 ul 中
                        ul.append(li);
                    }
                    // 将 ul 追加到 body 中
                    $("body").append(ul);
                }
            });
        });
    </script>
</html>





回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。