【 Ajax 】 JQuery中对 Ajax 的封装

最新推荐文章于 2024-07-15 22:52:27 发布
最新推荐文章于 2024-07-15 22:52:27 发布
阅读量277 收藏
点赞数
分类专栏： Ajax JQuery 文章标签： jquery ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46059971/article/details/108414674
版权

JQuery中对 Ajax 的封装

一、【JQuery】load() 方法

  • load( )

    • $element.get( url , [data] , [callback] , [type]);

      • url           ：请求 HTML url地址;

      • data         ：发送给服务器的（key/value形式）数据;

      • callback  ：请求完成时的回调函数;（xml/html/script/json/text/_default）；

    • Let’s Coding：

      • HTML 内容
        <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>getJSON()</title>
    <script src=""></script>
</head>
<body>
	<button id='btn'>Req</button>
	<p id='content'>Test text</p>
</body>
</html>
      • JS 内容
        $('#btn').click(function(){
// 注意你需要在当前目录下创建一个 test.txt 文件 写入一些数据，方便展示
	$('#content').load('test.text',function(){
		console.log('异步 request success');
	});
});

      在这里插入图片描述

    • 😁Tip：

      load 方法在使用时，如果有 data 参数，则请求方法为 POST ， 反之 ，请求方法为 GET；

二、【JQuery】get() && post() 方法

  • get ( )

    • $.get( url , [data] , [callback] , [type]);

      • url           ：请求 HTML url地址;

      • data         ：发送给服务器的（key/value形式）数据;

      • callback  ：请求完成时的回调函数;

      • type         ：设置返回数据内容的格式（xml/html/script/json/text/_default）；

    • Let’s Coding：

      <!--        $('#btn').click(function(){-->
<!--			// 注意修改 url-->
<!--			$.get('../../Public/data.json',{"name":"张三"},function(response){-->
<!--				// 根据传入的内容，返回对应数据内容-->
<!--				console.log(response);-->
<!--			// 不指定返回类型，默认为原数据类型-->
<!--			});-->
<!--			// 指定返回文本-->
<!--			//},'text');-->
<!--		});-->

$('#btn').click(function(){
	$.post('../../Public/data.json',{"name":"张三"},function(response){
		console.log(response);
	},'text');
});

  • post ( )

    • $.post( url , [data] , [callback] , [type]);

      • url           ：请求 HTML url地址;

      • data         ：发送给服务器的（key/value形式）数据;

      • callback  ：请求完成时的回调函数;

      • type         ：设置返回数据内容的格式（xml/html/script/json/text/_default）；

    • Let’s Coding：

      $('#btn').click(function(){
	// 注意修改 url
	$.post('../../Public/server.json',{"name":"张三"},function(response){
		// 根据传入的内容，返回对应数据内容
		console.log(response);
	// 不指定返回类型，默认为原数据类型
	)};
	// 指定返回文本
	//},'text'); 
});

三、【JQuery】ajax() 方法

  • ajax ( )

    • $.ajax( url , [settings]);

      • url           ：请求 HTML url地址;
      • settings  ：自行配置 ajax 参数;

        • type           ：设置请求方式;

        • data           ：发送给服务器的请求数据;

        • dataType    ：服务端响应数据的类型;

        • success     ：请求成功后的回调函数;

          function ( data , textStatus , jqXHR ) { }

          • data         ：服务端响应数据的类型;
          • textStatus ：服务器当前状态;
          • jqXHR       ：Ajax 核心对象;

    • Let’s Coding：

      $('#btn').click(function(){
	// 注意修改 url
	$.ajax('../../Public/data.json',{
		type:'get',
		dataType: 'json',
		success:function(data){
		    console.log(data);
        }
	});
});

四、【JQuery】getScript() 方法

  • getScript( )

    • $.getScript( url , [callback]);

      • url           ：请求 HTML url地址;

      • callback  ：JavaScript 文件加载成功后的回调函数;

    • Let’s Coding：

      $('#btn').click(function(){
	// 注意修改 url
	$.getScript('../../Public/data.js',function(data){
		console.log("不同的数据，不同的你。");
		// 执行接收的数据；
		eval(data);
	});
});

    • 😁Tip:

      getScript() 方法目的是为了：动态控制 js 文件的执行时间，避免不必要的资源浪费；

五、【JQuery】getJSON() 方法

  • getJSON( )

    • $.getJSON( url , [data] , [callback]);

      • url           ：请求 HTML url地址;

      • data         ：接收服务端返回的数据;

      • callback  ：JavaScript 文件加载成功后的回调函数;

    • Let’s Coding：

      $('#btn').click(function(){
	// 注意修改 url
	$.getJSON('../../Public/data.json',function(data){
		console.log(data);
	});
});

    • 😁Tip:

      getJSON() 方法的请求类型为 GET 类型，并且只能接收 JSON 类型的数据；

六、【JQuery】表单序列化

在进行案例分析之前我们需要一些提前的技术基础和，一些我们需要用到的数据，如下：

  1. 本地下载一份 jquery 库；
    ​ 在这里插入图片描述

    下载路径可参见：JQuery 线上版本整合（线上版本使用时加载会慢，建议下载）

  2. 本地 data.json 文件一份，输入内容如下（亦可自行编写）：

    [

  {
    "name": "javascript",
    "value": ["java","javascript","javascript 指南","javascript 高级"]
  },

  {
    "name": "html",
    "value": ["html","html5","html 指南","html 高级"]
  },

  {
    "name":"css",
    "value":["css","css 动画","css 入门","css 高级"]
  }
    
]

  • serialize() 方法

    • $element.serialize();

      • element      ：表单元素

      • serialize()    ：将表单组件对应的数值序列化为指定格式的字符串内容；

    • Let’s Coding：

      var $name = $('#name').val();
// 默认同步提交获取数据的方式
var data = $name.serialize();
// 异步提交表单
$('form').bind('submit',function(event){
    event.preventDefault();
    // 注意修改路径
    $.post('../../Public/data.json',data,function(res){
        console.log('post',data);
    })
});

  • serializeArray() 方法

    • $element.serializeArray();

      • element             ：表单元素

      • serializeArray()  ：将表单组件对应的数值序列化为JSON格式的字符串内容；

    • Let’s Coding：

      var $name = $('#name').val();
// 转化为JSON格式的数据
var data = $name.serializeArray();
// 异步提交表单
$('form').bind('submit',function(event){
    event.preventDefault();
    // 注意修改路径
    $.post('../../Public/data.json',data,function(res){
        console.log('post',data);
    })
});

七、【JQuery】实现【三级联动案例】

在这里插入图片描述

  • 三级联动案例

    • 案例前置

      在进行案例分析之前我们需要一些提前的技术基础和，一些我们需要用到的数据，如下：

      1. 本地下载一份 jquery 库；
        ​ 在这里插入图片描述

        下载路径可参见：JQuery 线上版本整合（线上版本使用时加载会慢，建议下载）

      2. 本地 data.json 文件一份，输入内容如下（亦可自行编写）：

        [

  {
    "name": "javascript",
    "value": ["java","javascript","javascript 指南","javascript 高级"]
  },

  {
    "name": "html",
    "value": ["html","html5","html 指南","html 高级"]
  },

  {
    "name":"css",
    "value":["css","css 动画","css 入门","css 高级"]
  }
    
]
    • 案例分析
      /* 动态搜索栏剖析
       1.实现省市联动
       2.实现市县联动		
*/
    • 案例实施
      • 1.构件HTML 结构：
      <!--  二级联动：子内容根据主内容的变化而变化  -->
<!--  三级联动：子内容根据上一级内容的变化而变化  -->
    <!-- 实现步骤：
              1. 先实现一个二级联动；
              2. 在实现一个二级联动；
    -->
<select id="province">
    <option value="">----</option>
</select>
<select id="city">
    <option value="">----</option>
</select>
<select id="county">
    <option value="">----</option>
</select>
      • 2.CSS 稍微修饰一丢丢：
       body{
    width:100vw;
    height:100vw;
    overflow:hidden;
    background-image:linear-gradient(60deg,#111111 0%,#222222 50%,#111111 100%);
}

select{
    display:block;
    width:200px;
    height:50px;
    font-weight:bold;
    border-radius:10px;
    margin:100px auto;
    background-image:linear-gradient(60deg,#353 0%,#464 50%,#353 100%);
}
      • 3.JS 逻辑代码剖析：
      var $provinceEle        = $('#province');                              // 获取 province 元素；
var $cityEle            = $('#city');                                  // 获取 province 元素；
var $countyEle           = $('#county');                               // 获取 province 元素；
var jsonData;                                                          // 存放所有数据；


// 获取数据并添加省份信息
$.getJSON('../../Public/data-three.json',function(data){
    jsonData = data;
    // 迭代获取省份并添加
    $.each(data,function(idx,obj){
        var provinceName = obj.province;
        // 添加 option 元素
        $provinceEle.append($('<option value="'+ provinceName + '">' + provinceName +  '</option>'))
    });
});

// 市联动
    /*
        添加对应省下的“市”
    */
$provinceEle.bind('change',function(){
    $cityEle.empty();
    addOption($cityEle,'----');
    // 获取当前选中城市的名字;
    var nowSelectProvince = $(this).children('option:selected').text();
    // 迭代获取对应的城市信息;
    $.each(jsonData,function(idx,obj){
        // 找到对应省份下的城市并添加
        if(nowSelectProvince === obj.province){
            $.each(obj.cities,function(cidx,cobj){
                $cityEle.append($('<option value="'+ cobj.city + '">' + cobj.city +  '</option>'));
            })
        }
    })
});

// 县联动
    /*
        添加对应省下的对应市下的“县”
    */
$cityEle.bind('change',function(){
    console.log(11);
    $countyEle.empty();
    addOption($countyEle,'----');
    // 获取当前选中省的名字;
    var nowSelectProvince = $provinceEle.children('option:selected').text();
    // 获取当前选中市的名字;
    var nowSelectCity = $(this).children('option:selected').text();
    // 迭代获取对应的城市信息;
    $.each(jsonData,function(idx,obj){
        // 找到对应省份下的城市并添加
        if(nowSelectProvince === obj.province){
            // 迭代所有市
            $.each(obj.cities,function(cidx,cobj){
                // 选中的市与当前正在迭代的市相等
                if(nowSelectCity === cobj.city){
                    // 迭代该市之下的所有县并添加
                    $.each(cobj.counties,function(ccidx,ccval){
                        $countyEle.append($('<option value="'+ ccval + '">' + ccval +  '</option>'));
                    });
                }
            });
        };
    });
});


// 添加元素
function addOption(ele,val){
    ele.append($('<option value="'+ val + '">' + val +  '</option>'));
}

    • 😁Tip:

      本案例中存在一个小bug，若你已解决或你还未解决，请留言发表你的意见；

八、【JQuery】实现【搜索栏动态提示】

在这里插入图片描述

  • 搜索栏动态提示

    • 案例前置

      在进行案例分析之前我们需要一些提前的技术基础和，一些我们需要用到的数据，如下：

      1. 本地下载一份 jquery 库；
        ​ 在这里插入图片描述

        下载路径可参见：JQuery 线上版本整合（线上版本使用时加载会慢，建议下载）

      2. 本地 data.json 文件一份，输入内容如下（亦可自行编写）：

        [
  {
    "province": "河北省",
    "cities": [
      {
          "city":"邢台市",
          "counties": [
            "羊范镇","龙乡镇","朱庄镇"
          ]
      },
      {
          "city":"邯郸市",
          "counties": [
            "灵泉镇","古龙镇","婀娜镇"
          ]
      },
      {
          "city":"保定市",
          "counties": [
            "莲池区","东金庄乡","枣庄"
          ]
      }
    ]
  },


  {
    "province": "河南省",
    "cities": [
      {
          "city":"大金市",
          "counties": [
            "阿龙镇","小麦镇","德邦镇"
          ]
      },
      {
          "city":"小金市",
          "counties": [
            "灵镇","龙镇","婀镇"
          ]
      },
      {
          "city":"奥斯市",
          "counties": [
            "池区","东金乡","枣庄市"
          ]
      }
    ]
  },


  {
    "province": "湖北省",
    "cities": [
      {
          "city":"邢市",
          "counties": [
            "羊镇","啊镇","朱镇"
          ]
      },
      {
          "city":"郸市",
          "counties": [
            "我镇","你镇","他镇"
          ]
      },
      {
          "city":"保市",
          "counties": [
            "你区","我区","他区"
          ]
      }
    ]
  }


]
    • 案例分析
      /* 动态搜索栏剖析

           1.为用户绑定输入事件;
           2.获取用户的输入内容;
           3.查询我们已存在的数据;
           4.将已存在数据和用户输入信息进行比较等操作，并返回对应的数据;
           		4.1 用户数据和内存数据部分或全部符合;
           5.更新数据到 HTML 页面;
           6.辅助功能
           		6.1 匹配栏显示
                6.2 失去焦点匹配栏消失
                6.3 匹配栏消失

*/
    • 案例实施
      • 1.构件HTML 结构：
      <div class="container">
    <input type="text" id="search">
    <div class="alert">
        <ul></ul>
    </div>
</div>
      • 2.CSS 稍微修饰一丢丢：
      *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    width:100vw;
    height:100vw;
    overflow:hidden;
    background-image:linear-gradient(60deg,#111 0%,#222 50%, #111 100%);
}
.container{
    margin-top:100px;
    margin-left:500px;
    font-size:16px;
    font-weight:bold;
}
#search,.alert{
    width:300px;
    border:1px solid black;
}
#search{
    font-size:16px;
    font-weight:bold;
    height:30px;
    padding:5px;
}
.alert{
    display:none;
}
.alert li{
    display:block;
    height:30px;
    padding:5px;
    background:gray;
    list-style:none;
    color:white;
}
      • 3.JS 逻辑代码剖析：
      // 1.绑定 input 输入事件（用户输入信息时触发）
        $('#search').bind('input',function(){
            // 清空已存在内容
            $('.alert>ul').empty();                                                                     // 每次更新时删除上一次查询数据
            $.getJSON('../Data/data.json',function(data){                                                       // 3.getJSON('文件路径',function(接收返回结果));
                $.each(data,function(index,obj){
                    var dataContent = obj.name;
                    // 4.判断输入的数据，是否匹配已存在数据的索引
                        // >= 0  : 匹配
                        // = -1  : 不匹配
                    // 2.$('#search').val() 获取搜索栏内容
                    if ( dataContent.indexOf($('#search').val()) >= 0 ){                                // 4.1输入的信息在已存在数据中
                        $.each(obj.value,function(idx,text){                                            // 5.遍历添加
                            $('.alert>ul').append($('<li>'+text+'</li>'));
                        })
                    }
                })
            })
            // 6.2显示与用户搜索数据匹配的数据;
            $('.alert').css('display','block');
        });

        // 6.2绑定 blur 失去焦点事件
        $('#search').bind('blur',function(){
            	// 6.3 提示栏消失
                $('.alert').css('display','none');
        });

九、【JQuery】异步提交表单

  • 异步提交表单

    在这里插入图片描述

    在进行案例分析之前我们需要一些提前的技术基础和，一些我们需要用到的数据，如下：

    1. 本地下载一份 jquery 库；
      ​ 在这里插入图片描述

      下载路径可参见：JQuery 线上版本整合（线上版本使用时加载会慢，建议下载）

    2. 本地 data.json 文件一份，输入内容如下（亦可自行编写）：

      [

  {
    "name": "javascript",
    "value": ["java","javascript","javascript 指南","javascript 高级"]
  },

  {
    "name": "html",
    "value": ["html","html5","html 指南","html 高级"]
  },

  {
    "name":"css",
    "value":["css","css 动画","css 入门","css 高级"]
  }
    
]
    • Coding
      • 1.构件HTML 结构：
      <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>异步提交表单</title>
    <script src="../../Public/jquery-min-1.12.4.js"></script>
</head>
<body>
    <form>
        <input type="text" id="name">
        <input type="submit" id="sub">
    </form>
</body>
</html>
      • 2.JS 逻辑代码剖析：
      var $name = $('#name').val();
// 构件发送给服务器的数据
var data = 'name' + $name;
// 异步提交表单
$('form').bind('submit',function(event){
    event.preventDefault();
    // 注意修改路径
    $.post('../../Public/data.json',data,function(res){
        console.log('post',data);
    })
});

十、总结

  • 本次学习内容：

    • 1.JQuery 对 Ajax 的 load() 、get() 、post()、ajax()、getScript()、getJson() 方法的封装，以及 JQuery 中的表单序列化方法；

    • 2.JQuery 实现【三级联动案例】

    • 3.JQuery 实现【搜索栏动态提示】

    • 4.JQuery 实现【异步提交表单】

不倒翁丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 封装Ajax
03-23
NULL 博文链接：https://feiyezi.iteye.com/blog/1068948
Jquery中Ajax方法封装
刚刚说
08-08 376
function AjaxData(func, _option) { /// <summary> ///AjaxData ///【创建时间:2019-07-24 11:42:41】 /// </summary> /// <param name="func">请求url</param> /// <...
【精简版】jQuery 中的 Ajax 详解
最新发布
weixin_46485638的博客
07-15 2521
精简的 jQuery 中的 Ajax 详解。
对jquery的ajax封装
05-03
对常用jquery的ajax函数进行封装，便于调用，会有不同错误的错误提醒
jquery中封装ajax
weixin_48685326的博客
07-09 186
jQuery中 封装的 ajax请求 有3种 1, $.get() get请求方式 参数有4个参数,必填参数是 url地址 其他参数都是选填参数,可以没有 参数的形式是对象形式 $.get({ url : 地址(必填) data : 携带的参数 对象形式 dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析 success : function(){} 请求成功时执行的函数 }) 2, $.post() post请求方式 参数有4个参数,必填参数是 url地址 其他
jQuery里面的ajax封装
LoveYouZsw的博客
04-29 179
ajax的全局函数 ajax的三层封装 三层封装中，需要注意中层的load方法，需要注意底层的ajax是所有ajax封装的基础，所有jQuery的封装函数或者方法都可以通过原生js来实现，再一个就是底层工具类方法，可以进一步封装了部分功能，提高开发效率。 ...
对Jquery中的ajax再封装,简化操作示例
12-10
在本示例中，我们探讨了如何通过JavaScript库jQuery对内置的`ajax`函数进行封装，以实现更简洁、易用的操作方式。首先，我们来看一下原始的jQuery `ajax`函数的基本结构，它是一个非常强大的异步数据通信方法，可以...
JQuery 封装 Ajax 常用方法(推荐)
10-19
本文将介绍easy-ajax封装后的常用方法。 首先，提到easy-ajax，其本质是一个为了治理前端开发者在编写Ajax请求时出现的混乱局面而产生的工具。其封装的目标是提供一种统一的方法来处理Ajax请求，包含默认的jQuery ...
封装了jQuery的Ajax请求全局配置
12-12
下面是在项目中封装了jQuery的Ajax，分享给大家。 代码： 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {  var url = opt.url;  var href = location.href;  // 判断是否跨域请求  var ...
基于jQuery的ajax方法封装
10-21
然而，在实际项目开发中，我们往往需要对AJAX调用进行封装，以满足业务需求和代码复用性，以及提升代码的可维护性。 首先，AJAX技术允许在客户端和服务器端之间进行异步通信，这个过程是不需要完全刷新页面的。通过...
jQuery版AJAX简易封装代码
10-21
在使用 jQuery 进行 AJAX 开发时，常常需要对原生的 AJAX 方法进行封装，以符合特定场景下的需求。以下是使用 jQuery 进行 AJAX 封装时应该掌握的知识点： 1. jQuery AJAX 方法基础： - jQuery 提供了简单的 AJAX ...
jQuery中对ajax的封装
11-30 300
一、底层接口 $.ajax({ url:'xxx', // 请求地址 type:'get', // 请求方式get/post data:{id:1,name:'张三'}, // 请求参数 dataType:'json', // 用于设置响应体的类型，跟data参数没有关系 beforeSend:function(){ ...
基于jQuery的ajax的封装
weixin_45806058的博客
08-25 1550
基于Jquery的ajax的公共方法封装
Ajax——get封装
jwz934738949的博客
09-07 185
function obj2str(obj) { obj.t = new Date().getTime() var res = [] for (var key in obj) { // 在传送数据时，有可能会出现中文，但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) } return res.
jquery中ajax封装原理/封装jquery的ajax工具函数
dayewandou的博客
09-21 2459
第一次写博客，如果有些的不对或者不正确的地方，还希望大神们能够批评指正，豌豆拜上！！ Hello,every body!!,豌豆横空出世，哈哈，纠结了很久的第一篇博客即将面世     当当当.....出场自带bgm哟，话说写博客这个事，也不知道能写多久额，给自己一个鼓励的膜拜吧！！     ok，果然刚开始不知道写点啥，尴尬...还是开始正题吧！！     今天给大家分享一下jquery中
JQuery对AJAX的封装与实现
weixin_39218464的博客
09-20 155
简单请求的3种方法 1、 $.get(URL,callback); 2、 $.post(URL[,data,callback,datatype]); 3、 jq对象.load(url,data,callback); $.post(‘请求地址’, {a:100,b:200}, function(data){console.log(data)}) get方法： <!DOCTYPE html> <html lang="en"> <head> <meta ch
Ajax入门及jQuery库对Ajax的封装
begefefsef的博客
08-01 161
全称为AsynchronousJavaScriptAndXML，异步JavaScript和XML的一种网页开发技术。是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。用于实现与服务器进行异步交互的功能。它可以实现页面无刷新更新数据(页面的局部刷新),提高用户浏览网页的体验。相较于传统网页，使用Ajax技术的优势具体有以下几个方面（1）、减轻服务器的负担（2）、节省带宽（3）、用户体验更好。...
jquery对Ajax的封装
wangtao的博客
09-08 292
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对Ajax做封装</title> </head> <body> </body> <script src="js/common/jquery-3.4...
自行封装Jquery的ajax的form方法
occultskyrong的专栏
03-11 2053
文档说明： JQuery的ajax能够实现异步数据加载到页面。同样，ajax还可以用来提交form的表单数据，同时获取返回的信息来局部更新页面。便于页面无刷新时提交表单，解决刷新全页面时无法保存用户在此页面的局部操作问题，提高用户体验度。 用户故事： 用户A需要查看时间a到时间b之间的数据信息，此时用户A在时间选择框（默认为当日时间c）中选择起始时间a和截止时间b。点击“查询”按钮后，页
jQuery中的Ajax封装与常用方法
jQuery对原生的XMLHttpRequest对象进行了封装，提供了直观易用的API，使得开发者可以更高效地处理AJAX请求。 1. **$.ajax(options)**: 这是jQuery提供的最全面的AJAX方法，允许自定义各种选项，如请求类型（GET或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值