jquery网络请求和插件

# jQuery

- 今天我们继续来聊 `jQuery`

## 发送 ajax 请求

- 发送 get 请求

  ```js
  // 直接使用 $.get 方法来发送一个请求
  /*
  	参数一： 请求地址
  	参数二： 请求时携带的参数
  	参数三： 请求成功的回调
  	参数四： 返回的数据类型
  */
  $.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')

发送 post 请求

// 直接使用 $.post 方法来发送一个请求
/*
	参数一： 请求地址
	参数二： 请求时携带的参数
	参数三： 请求成功的回调
	参数四： 返回的数据类型
*/
$.post('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')

综合发送 ajax 请求

// 使用 $.ajax 方法
// 只接受一个参数，是一个对象，这个对象对当前的请求进行所有的配置
$.ajax({
    url: './ajax',   // 必填，请求的地址
    type: 'GET',   // 选填，请求方式，默认是 GET（忽略大小写）
    data: {},   // 选填，发送请求是携带的参数
    dataType: 'json',   // 选填，期望返回值的数据类型，默认是 string
    async: true,   // 选填，是否异步，默认是 true
    success () {},   // 选填，成功的回调函数
    error () {},   // 选填，失败的回调函数
    cache: true,   // 选填，是否缓存，默认是 true
})

发送一个 jsonp 请求

// 使用 $.ajax 方法也可以发送 jsonp 请求
// 只不过 dataType 要写成 jsonp
$.ajax({
    url: './jsonp.php',
    dataType: 'jsonp',
    data: { name: 'Jack', age: 18 },
    success (res) {
        console.log(res)
    },
    jsonp: 'cb',  // jsonp 请求的时候回调函数的 key
    jsonpCallback: 'fn'   // jsonp 请求的时候回调函数的名称
})

jQuery 的多库共存

我们一直在使用 jQuery，都没有什么问题
但是如果有一天，我们需要引入一个别的插件或者库的时候
人家也向外暴露的是 ``获取 jQuery
那么，我们的 jQuery 就不能用了

那么这个时候，jQuery 为我们提供了一个多库并存的方法

// 这个方法可以交还 jQuery 命名的控制权
jQuery.noConflict()

// 上面代码执行完毕以后 $ 这个变量就不能用了
// 但是 jQuery 可以使用
console.log($) // undefined
console.log(jQuery) // 可以使用

完全交出控制权

// 这个方法可以交并且传递一个 true 的时候，会完全交出控制权
jQuery.noConflict(true)

// 上面代码执行完毕以后 $ 这个变量就不能用了
// jQuery 这个变量也不能用了
console.log($) // undefined
console.log(jQuery) // undefined

更换控制权

// 可以用一个变量来接受返回值，这个变量就是新的控制权
var aa = jQuery.noConflict(true)

// 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了
aa('div').click(function () { console.log('我被点击了') })

JQuery 的插件

jQuery 给咱们提供很多有意思的插件

jQuery Cookie 插件

传送门

Jquery分页插件

传送门

html结构：

<!--自己写的结构-->
<div class='container'>
	<ul class="paging_list">
        <!--要渲染的样式-->
     	<!--<li class="li-item">
            <a href="html/details.html?id=${item.goods_id}">
                <div class="pic">
                    <img src="${item.img_small_logo}">
                        </div>
            <p class="title">${item.title}</p>
            <p class="price">${item.price}</p>
            </a>
			<button data-id="${item.goods_id}" id="b">加入购物车</button>
         </li>-->

     </ul>
</div>

<!--分页结构-->
<div class="paging_content">
    <div class="paging_first">首页</div>
    <div class="paging_up">上一个</div>
    <div class="paging_btn"></div>
    <div class="paging_down">下一个</div>
    <div class="paging_last" id="">尾页</div>
</div>

css样式：

<style>
	* {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #e5e5e5;
    }
    a{
        text-decoration: none;
        color: black;
    }
    ul {
        width: 1200px;
        min-height: 300px;
        margin: 20px auto;
    }

    ul li {
        list-style: none;
        width: 236px;
        height: 304px;
        background-color: #fff;
        float: left;
        margin: 20px;
        position: relative;
    }

    ul li .pic {
        height: 180px;
        position: relative;
        padding: 0 10px;
    }

    ul li .pic img {
        width: 160px;
        height: 160px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    ul li p {
        font-size: 14px;
        text-align: center;
        line-height: 26px;
    }

    ul li p.price {
        color: #ff6700;
    }

    ul li #b {
        display: block !important;
        margin: 10px auto;
        width: 100px;
        height: 25px;
        position: absolute;
        bottom: 5px;
        left: 50%;
        margin-left: -50px;
    }
    .title{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
</style>

/*分页插件样式*/
<style>
.paging_content .paging_btn {
    display: flex;
    justify-content: space-around;
}

.paging_btn span:hover {
    background-color: #b6b6b6;
    color: #fff;
}

.paging_active {
    background-color: #b6b6b6;
    color: #fff;
}

.paging_btn span {
    width: 40px;
    height: 40px;
    color: #333;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transition: .5s;
    border:1px solid #ccc;
    border-right: 0;
}
.paging_btn span:nth-last-child{
    border:1px solid #ccc;
}
.paging_content {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    position: relative;
    width: 1000px;
    background-color: #e5e5e5;
    margin: 20px auto;
}

.paging_first,
.paging_last,
.paging_up,
.paging_down {
    width: 60px;
    height: 40px;
    line-height: 40px;
    color: #333;
    border:1px solid #ccc;
    cursor: pointer;
    text-align: center;
    border-right: 0;
}
.paging_last{
    border:1px solid #ccc;
    margin-right: 10px;
}
.paging_first:hover,
.paging_last:hover,
.paging_up:hover,
.paging_down:hover {
    background-color: #b6b6b6;
    color: #fff;
}
.paging_Btn p{
    color: red;
}
.paging_textBox{
    margin-right: 10px;
    color: #585858;
    font-size: 18px;
}
.paging_textBox input{
    margin: 0 2px;
    width: 50px;
    height: 38px;
    border:1px solid #ccc;
    outline: none;
}
.paging_textBox>button{
    width: 50px;
    height: 38px;
    cursor: pointer;
    color: #333;
    border:1px solid #ccc;
    transition: .5s;
    margin-left: 10px;
    outline: none;
}
.paging_textBox>button:hover{
    background: #b6b6b6;
}
.paging_max{
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #8b8b8b;
}

/* 注意!! 这个两个样式是一些效果必备的! */
.paging_none{
    display: none !important;
}
.paging_btn_none_block{
    display: block !important;
}
</style>

js逻辑：

$(".paging_list").paging({
    PageNum: 10, //每页显示数目
    pageMax: true, //按钮长度是否显示
    pageMaxHideShow: false, //在最后一个的时候是否隐藏按钮长度
    pageDownUpHide: false, //到第一个或最后一个是否让上一页或下一页消失
    pageInput: true, //是否使用文本框输入跳转
    pagingBtnHide: false, //是否让按钮变为一个
    pagingBtnPaging: true,//按钮是否分页
    pagingDisplay: "flex"//显示的属性，弹性盒子还是块化
})