响应式秒变pc
<meta name="viewport" content="width=device-width,minimum-scale=.3,maximum-scale=.3,initial-scale=.3,user-scalable=no">2025年4月
jPages.min.js使用
<style>
.holder a:hover{color:#af1e25}
.holder a.jp-previous{margin-right:15px}
.holder a.jp-next{margin-left:15px}
.holder a.jp-current,a.jp-current:hover{background:#af1e25!important;border-color:#af1e25!important;color:#fff!important}
.holder a.jp-disabled,a.jp-disabled:hover{color:#bbb}
.holder a.jp-current,.holder a.jp-disabled,a.jp-current:hover,a.jp-disabled:hover{cursor:default}
.holder span{margin:0 5px}
.holder{display:flex;justify-content:center;flex-wrap:wrap;margin-right:10px}
.upage{display:flex;justify-content:center;flex-wrap:wrap;margin-top:40px}
.pgtool{display:flex;justify-content:center;flex-wrap:wrap}
.upage .pg1{line-height:30px;font-size:14px;color:#666}
.upage .pg2{display:none}
.pginp{height:30px;width:60px;border:1px solid #ddd;border-radius:3px;margin:0 5px;outline:0;text-align:center;-webkit-appearance:none}
#pgGo{background:#af1e25;height:30px;padding:0 10px;border:0;border-radius:3px;color:#fff;outline:0;cursor:pointer}
/style>
function list(data) {
var nopic = "/ggsydw/nopic.jpg";
var html = "";
data.forEach(function (item, index) {
if (/cnsq.*shtml|shtml.*cnsq/.test(item.url)) {
item.url = "";
}
html += `<li><div class="img"><img class="lazy" data-original="${item.img ? item.img : nopic}" alt=""></div><div><div class="txt"><h4>${item.title}</h4>
<div class="info"><p><strong>机构性质：</strong><span>${item.jgxz}</span></p><p><strong>联系方式：</strong><span>${item.lxfs}</span></p><p><strong>地址：</strong><span>${item.dz}</span></p></div></div><div class="info1"><a href="${item.url ? item.url : "javascript:;"}" target="${item.url ? "_blank" : "_self"}"><img src="/cnsq/xhtml/ztzl/ggsydw/wz.png">官网</a><a href="javascript:;"><img src="/cnsq/xhtml/ztzl/ggsydw/wx.png">微信<span><img src="${item.code}" alt=""></span></a></div></div></li>`;
});
if (data.length != 0) {
$("#data").html(html);
$(".holder").jPages({
containerID: "data",
perPage: 12,
first: "首页",
previous: "上一页",
next: "下一页",
last: "尾页",
callback: function (pages, items) {
$("#legend1").html("当前 " + pages.current + " / " + pages.count + " 共" + items.count + "条记录");
$("img.lazy").lazyload({ effect: "fadeIn" });
},
});
$("#pgGo").click(function () {
var page = parseInt($(".pginp").val());
$(".holder").jPages(page);
});
$(".notip").hide();
} else {
$("#data").html("");
$(".holder").html("");
$(".notip").show();
}
}
极致cms搜索接口
<input type="text" id="keyword"><button id="so">搜索</button>
<ul id="data"></ul>
<button class="ajaxMore" style="display: none">加载更多</button>
<script type="text/javascript">
let curpage = 1;
let limit=15;
let sum =0;
let _fields='id,tid,title,keywords,description,litpic,body,htmlurl,target,addtime';
let _serUrl ="/GetData/getDataSearch.html";
let _model='article';
let _key='232323';
let _word = '';
let _title = 'title';
$("#so").click(function(){
_word = $("#keyword").val();
let html='';
$.ajax({
url:_serUrl,
dataType:"json",
async:true,
data:{model:_model,key:_key,search:_title,word:_word,fields:_fields,limit:limit,page:curpage},
type:"POST",
success:function(r){
console.log(r);
sum = r.sum;
if(sum>=1&&sum<=limit){
$(".ajaxMore").show().html('没有更多了！');
}else if(sum>limit){
$(".ajaxMore").show();
}else{
$(".ajaxMore").show().html('无相关数据');
}
$("#data").html('');
for(const item of r.data){
html+=`<li><h4>${item.title}</h4></li>`;
}
$("#data").html(html);
},
error:function(){
}
})
})
$(".ajaxMore").click(function(){
curpage++;
let html = '';
$.ajax({
url:_serUrl,
dataType:"json",
async:true,
data:{model:_model,key:_key,search:_title,word:_word,fields:_fields,limit:limit,page:curpage},
type:"POST",
success:function(r){
if(r.data.length>0){
let allpage = r.allpage;
if(curpage<=allpage){
if(r.data.length<limit){
$(".ajaxMore").text('没有更多了!');
};
for(const item of r.data){
html+=`<li><h4>${item.title}</h4></li>`
}
$("#data").append(html);
}
}
}
})
})
</script>axios发送ajax请求
Axios 发送请求示例
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。相比 jQuery 的 Ajax，Axios 更加现代和强大。以下是各种 Axios 请求的示例
1. 安装 Axios
bash
npm install axios
# 或通过 CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2. 基本 GET 请求
// 最简单的形式
axios.get('/api/user')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('请求出错:', error);
});
// 带参数的 GET 请求
axios.get('/api/user', {
params: {
ID: 12345
}
})
.then(response => {
console.log(response.data);
});
3. POST 请求
// 发送 JSON 数据
axios.post('/api/user', {
firstName: '张',
lastName: '三',
age: 30
})
.then(response => {
console.log(response.data);
});
// 发送表单数据 (application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('name', '李四');
params.append('age', '25');
axios.post('/api/user', params);
4. 并发请求
// 同时发起多个请求
function getUserAccount() {
return axios.get('/api/user/123');
}
function getUserPermissions() {
return axios.get('/api/user/123/permissions');
}
Promise.all([getUserAccount(), getUserPermissions()])
.then(results => {
const account = results[0].data;
const permissions = results[1].data;
console.log(account, permissions);
});
5. 文件上传
// 通过 FormData 上传文件
const formData = new FormData();
const file = document.querySelector('input[type="file"]').files[0];
formData.append('file', file);
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`${percentCompleted}%`);
}
})
.then(response => {
console.log('上传成功:', response.data);
});
6. 自定义配置
// 创建自定义实例
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
// 使用实例
instance.get('/user')
.then(response => {
console.log(response.data);
});
7. 请求和响应拦截器
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求前做些什么
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response.data; // 直接返回data部分
}, error => {
// 对响应错误做点什么
if (error.response.status === 401) {
// 处理未授权情况
window.location.href = '/login';
}
return Promise.reject(error);
});
8. 错误处理
axios.get('/api/user/123')
.then(response => {
console.log(response.data);
})
.catch(error => {
if (error.response) {
// 请求已发出，服务器返回状态码不在 2xx 范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已发出但没有收到响应
console.log(error.request);
} else {
// 设置请求时发生错误
console.log('Error', error.message);
}
console.log(error.config);
});
9. 取消请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/api/user/123', {
cancelToken: source.token
}).catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('请求已取消:', thrown.message);
} else {
// 处理其他错误
}
});
// 取消请求
source.cancel('用户取消了请求');
10. 全局配置
// 设置全局默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
11. 使用 async/await
async function getUser() {
try {
const response = await axios.get('/api/user/123');
console.log(response.data);
} catch (error) {
console.error('获取用户失败:', error);
}
}
// 并发请求
async function getData() {
try {
const [user, orders] = await Promise.all([
axios.get('/api/user/123'),
axios.get('/api/orders?user=123')
]);
console.log(user.data, orders.data);
} catch (error) {
console.error('获取数据失败:', error);
}
}jquery发送ajax请求
jQuery发送Ajax请求示例
https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js
1. 基本GET请求
$.ajax({
url: '/api/data', // 请求地址
type: 'GET', // 请求方法
dataType: 'json', // 预期返回的数据类型
beforeSend:function(){
},
success: function(data) {
// 请求成功处理
console.log('获取数据成功:', data);
},
complete:function(){
},
error: function(xhr, status, error) {
// 请求失败处理
console.error('获取数据失败:', error);
}
});
2. 带参数的GET请求
$.ajax({
url: '/api/search',
type: 'GET',
data: { // 发送到服务器的数据
keyword: 'jQuery',
page: 1
},
dataType: 'json',
success: function(data) {
console.log('搜索结果:', data);
},
error: function(xhr, status, error) {
console.error('搜索失败:', error);
}
});
3. POST请求
$.ajax({
url: '/api/users',
type: 'POST',
contentType: 'application/json', // 发送JSON数据
data: JSON.stringify({ // 转换为JSON字符串
name: ' ',
age: 25,
email: ' '
}),
dataType: 'json',
success: function(data) {
console.log('创建用户成功:', data);
},
error: function(xhr, status, error) {
console.error('创建用户失败:', error);
}
});
4. 表单数据提交
$('#myForm').submit(function(e) {
e.preventDefault(); // 阻止表单默认提交行为
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: $(this).serialize(), // 序列化表单数据
dataType: 'json',
success: function(data) {
alert('表单提交成功!');
},
error: function(xhr, status, error) {
alert('表单提交失败: ' + error);
}
});
});
5. 文件上传
$('#fileUpload').change(function() {
var formData = new FormData();
formData.append('file', this.files[0]);
$.ajax({
url: '/api/upload',
type: 'POST',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
dataType: 'json',
success: function(data) {
console.log('文件上传成功:', data);
},
error: function(xhr, status, error) {
console.error('文件上传失败:', error);
},
xhr: function() {
// 获取原生XHR对象
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
// 添加上传进度事件
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
$('#progress').text(percent + '%');
}
}, false);
}
return xhr;
}
});
});
6. 简写方法
jQuery提供了一些Ajax的简写方法：
$.get();
$.get('/api/data', {id: 123}, function(data) {
console.log('获取数据:', data);
}, 'json');
$.post();
$.post('/api/users', {name: '李四', age: 30}, function(data) {
console.log('创建用户:', data);
}, 'json');
$.getJSON();
$.getJSON('/api/data.json', function(data) {
console.log('JSON数据:', data);
});
7. 全局Ajax设置
可以设置全局Ajax默认值：
$.ajaxSetup({
timeout: 5000, // 5秒超时
headers: { // 设置请求头
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
8. 使用Promise风格
jQuery Ajax也支持Promise风格调用：
$.ajax({
url: '/api/data',
type: 'GET',
dataType: 'json'
})
.done(function(data) {
console.log('成功:', data);
})
.fail(function(xhr, status, error) {
console.error('失败:', error);
})
.always(function() {
console.log('请求完成');
});