jQuery中Cookie及Ajax的使用方法总结

Love The Way You Lie 2023-07-19 10:59 12阅读 0赞

## jQuery: ##

**1.快速简洁的JavaScript框架**

**2.jQuery设计的宗旨是”write less，Do More“**

**3.兼容各种主流浏览器**

**jQuery的好处**

**1.简化js的复杂操作**  
**2.不在需要关心兼容性**  
**3.提供大量使用的方法**

jQuery中方法有很多，这里先总结一下jQuery中对Cookie的处理 以及Ajax的方法

**介绍一下cookie**  
cookie的构成：

name=value;[expires=date];[path=path];[domain=somewhere.com];[secure],

**expires:过期时间**  
必须填写日期对象（过期日期） 默认时间是会话，会话结束后就清除  
注：系统会自动清除过期的cookie

**path 限制访问路径**  
如果不设置path，会默认设置当前路径  
注：我们设置的cookie的路径，和加载的当前文件的路径。必须一致，如果不一致，cookie访问失败

**domain 限制访问域名：**  
如果不设置domain，默认当前服务器的域名、ip  
注：如果当前加载文件域名和设置的域名不一样，设置cookie失败

**secure 安全**  
如果不设置。设置cookie 可以通过http协议加载文件设置  
也可以通过https协议加载文件设置  
如果设置了安全 只能设置https协议加载cookie

**juqery cookie的使用方法**

**$.cookie()**  
具体调用格式  
$.cookie(name) 通过name取值

$.cookie(name,value) 设置name和value

$.cookie(name,value \{  
可选项  
raw:ture raw:true value 不进行编码 默认是false进行编码  
\})

$.cookie(name，null); 删除cookie

$.cookie("变种人","x教授",{  //添加cookie
                 //可选项
                 expires:7,    //7天后过期
                 raw:ture
             })
             $.cookie("赛亚人","贝吉塔",{ 
                 expires:30
             })
             $.cookie("海贼王","路飞",{ 
                 expires:1
             })
    
            alert($.cookie("变种人")); //显示cookie
             alert($.cookie("赛亚人"));
             alert($.cookie("海贼王")); */
    
             $(function(){   //删除cookie
                $("button").click(function(){ 
                 $.cookie("变种人",null);
                 alert($.cookie("变种人"));
                })
             })

## **Ajax的使用方法** ##

Ajax的基本使用方法和Ajax框架非常类似（对AJAX框架需要复习的话我的博客有一篇对Ajax进行了详细的说明，有兴趣的可以去康康）

直接使用方法：

$.ajax({ 
           type:"get",
           url:"1.txt",
           data:{ 
    
                },
           success:function(data,statusText,xhr){ 
              // 
              // statusText:下载状态success error
                            // xhr:ajax对象
                            // 
                alert(data+","+statusText);
                },
                error:function(msg){ 
                  alert(msg);
                   }
                     })

**Ajax跨域的操作（简化到只需要一步就到位）厉害！！！**

只需要在data后加上 并且将接收到的数据直接转成字符串

dataType:"jsonp", //跨域 接收到的数据直接转成字符串

放入代码中：

$.ajax({ 
          type:"get",
          url:"https://api.asilu.com/weather/",
          data:{ 
            city:"成都"
             },
    dataType:"jsonp", //跨域 接收到的数据直接转成字符串
          success:function(data,statusText){ 
               // alert(data +","+ statusText);
    
               console.log(data);
                        },
             error:function(msg){ 
                 alert(msg);
               }

**除此之外jQuery还提供了很多ajax的函数，更是稳的一批**

**$().load（url）**  
将url传入以后，将下载到数据直接填充到被选中元素的inherHTML中

$("div").load("2.txt");   //直接下载数据并显示在div中
      $("div").load("2.txt h2");//直接下载数据符合条件的（h2）并显示在div中

**$.get()**

**$.post()**

$("button").eq(2).click(function(){ 
                 /* $.get("2.txt",function(data,statusText,url){ alert(data); }) */
                 $.post("1.post.php",{ 
                     username:"tian",
                     age:19,
                     password:"123456"
                 },function(data,statusText,url){ 
                    alert(data);//将数据发送出去，并接受回来
                 })