JQuery Cookie&Ajax的操作！

最新推荐文章于 2024-09-23 14:48:30 发布

一个虽然帅,但是菜的cxy

最新推荐文章于 2024-09-23 14:48:30 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_38777614/article/details/104975391

前端专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍使用JQuery操作Cookie的方法，包括设置、获取和删除Cookie，并演示了如何利用Ajax实现局部网页更新，涵盖GET与POST请求及跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：JQuery Cookie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 20px;
            border: 1px solid black;
            position: absolute;
            left: 80px;
            top: 45px;
        }
    </style>
    <script></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <!--jq cookie是依赖于jq的, 所以先引入jq, 都是用的cdn(内容分发网络)-->
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script>
        /**
         * jqCookie:
         *  设置: $.cookie(name,value);
         *       $.cookie(name,value,{
         *           //可选项目
         *            raw:true(value不进行编码,默认是false)
         *            expires:7, 单位是天
         *            path：'/',
         *            domain: 'jquery.com',
         *            secure:true
         *       })
         *  获取: $.cookie(name);
         *  删除: $.cookie(name,null);
         *
         *  怎么查看/删除: F12: Application--> Cookies
         *  疑问: cookie不是由服务器端创建,然后发送给客户端的小饼干吗?
         *        怎么用jq也可以创建呢??
         *        它这个和javaweb的cookie还是有区别的,它是由浏览器创建的!,这个cookie总是在请求头中!
         */
        $(function () {
            $("button").eq(0).click(function () {
                $.cookie("name","tom",{
                    expires: 10
                });

                $.cookie("sex","男",{
                    expires: 10
                });
            });

            $("button").eq(1).click(function () {
                var obj = $.cookie(name);//这里不加"",居然可以输出全部的cookie !
                // console.log(obj);
                for(attr in obj){
                    // console.log(attr+":"+$.type(attr)); //打印属性的类型,string
                    console.log(attr+":"+$.cookie(attr));
                }
            });

            //定义在外面做全局变量！
            var count = 1;
            $("button").eq(2).click(function () {
                var obj = $.cookie(name); //得到所有cookie,并是一个obj
                for(prop in obj){
                   $.cookie(prop,null);
                }
                console.log(count);
                if(count==1){
                    var spanEle = $("<span>cookie已删除</span>").css("color","red");
                    $("div").append(spanEle);
                }
                count++;
            });
        });

    </script>
</head>
<body>
    <button>创建cookie</button>
    <button>查看cookie</button>
    <button>删除cookie</button>
    <div></div>
</body>
</html>

可以通过这里操作cookie

二：Ajax(在不重载全部页面的情况下，实现了对部分网页的更新)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script>
      $(function () {
         $("button").eq(0).click(function () {
             $.ajax({
                 type:"get",
                 url:"https://api.asilu.com/weather/",
                 data:{
                     city:"深圳"
                 },
                 dataType: "jsonp", //带上这个才能跨域请求!
                 success:function (data,statusText,xhr) {
                     /**
                      * data: 返回的数据
                      * statusText: 以文本的形式显示成功(success),或者失败(fail)
                      * xhr: 是ajax的对象
                      */
                     console.log(data);
                 },
                 error:function (msg) {
                     console.log(msg);
                 }
             });
         });

         $("button").eq(1).click(function () {
             $.get("Data_Get",function (data,status,xhr) {
                $("div").append(data); //这样可以实现局部刷新的效果！
             })
         });

         $("button").eq(2).click(function () {
             $.post("AServlet",{
                 username: 'tom',
                 password: '123',
                 age: '22'
             },function (data,status,xhr) {
                 alert(data);
             });
         });
      })
    </script>
</head>
<body>
    <button>ajax方式</button>
    <button>get方式</button>
    <button>post方式</button>
    <div></div>
</body>
</html>

参考：https://www.cnblogs.com/s313139232/p/7839037.html
来自：虽然帅，但是菜的cxy