Jquery总结

1.jquery中$方法冲突问题

  • $();
  • jQuery();

一、Ajax

什么是Ajax?

无刷新状态更新页面,其不是js中的单一技术,而是一串技术的合集,异步提交

其中包含:

  1. js(用户与网页的交互)
  2. XMLHTTPRequest对象(在不终止浏览器的情况下,向服务器发送请求)
  3. 服务器上的文件,以xml、json、php的格式保存
  4. 其他的js,来处理返回的值

优势:

  • 提升用户的性能
  • 不需插件
  • 减轻服务器与带宽的负担


缺点:

  • IE低版本不支持
  • 没有前进、后退按钮
  • 缺乏调试工具
  • 搜索引擎缺乏(爬虫不认识)

Jquery对Ajax进行了三层封装:

  • 第一层:$ajax()
  • 写法:

                $(function(){

                      $("xx").click(function(){

                           $.ajax({

                           });

                      });

                 });

              这是最层的方法,其他所有的方法都是被封装到$ajax()当中的,其只有一个参数,用来传递键值对的对象,

              可以用来代替其他所有的方法,写几个常用的参数

               url                string

               type              string(默认是get)

              data              string或 object(发送到服务器上的数据)

              datatype       string(返回的参数类型,如:xml/json/html)

              success       function(成功后调用的参数)

              error              function(失败后调用的参数)

             

  • 第二层:$post()、$get()、load()

                    load(url,data,callBack)

                           url:必须,地址,string类型

                           data:不必须,Object类型,key-value

                           callBack:不必须,返回的结果success或者error

                            例子:

                             <script>
                                  $(function(){
                                      $("#btn").click(function(){
                                               $("#p1").load('index.html');
                                      });
                                 });
                            </script>

                             <body>
                                  <button id="btn">ajax练习</button>
                                  <p id="p1"></p>
                             </body>

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

                             注:$("#p1").load('index.html  .xx');选择器的筛选

                                         onload()方法是局部方法,不需要指定$,他需要的是一个jquery的对象前缀。更适合异步获取;

                                         $.get()和$.post()是全局方法需要指定。更适合传递参数

                  向服务器提交数据的两种方式get和post:,只是比load多一个type属性

  • 本身是纯文本,强行xml或者json格式,无法获取数据
  • 默认xml格式

                   $.get()方法<其中默认是get方法>

                       在load()中的使用

                                 例:$("#p1").load('index.php?url=lina');

                      $.get()方法使用

                      

                    

                 

                      

                   $.post()方法

                          在load()中的使用

                                  例:$("#p1").load('index.php',{
                                                 url:'lina'
                                                       }
);

                在数据载入完毕之后,就能使用回调函数callBack三个参数responseText请求返回    ,textStatus请求状态      ,XMLHttpResponse对象

                     $("#p1").load('index.php',{
                                 url:'lina'
                              },function(response,status,xhr){
                    
                    
                                                             
                       }
);

                status:success或error

                        $.post()方法的使用

                       


  • 第三层:$getScript()、$getJSON()

               $getScript()

                     一般的我们引入的文件,不管是否用到都会被加载进来,但是用到getScript之后,只在用到的时候加载,不用的时候不加载

               $getJSON()

                   读取一般JSON文件

表单序列化

例子:


表单元素多的时候非常的不方便,就出现了表单序列化

      $('form').serialize();得到字符串的键值对<序列化>

      decodeURIComponent();<反序列化>

      $.ajaxSetup({});初始化重复的属性

      $.param()解data传递的数据

********************************************************

学习阶段,及时更新

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值