jQuery 封装好的 Ajax的使用

admin · 2022-8-18 22:23:40

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>

		自动登录	找回密码
密码			立即注册

jQuery 封装好的 Ajax的使用

0 个回复

快速回复

admin

楼主热帖

标签云

艾Q网