至尊技术网 - ajax
https://www.zzwws.cn/tag/ajax/
-
原生js封装ajax
https://www.zzwws.cn/archives/6358/
2022-09-03T11:46:00+08:00
function ajax(options) {
var xhr = null;
var type = 'GET';
var params = formsParams(options.data);
if(typeof options.type != 'undefined'){
type = options.type.toUpperCase();
}
//创建对象
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (typeof options.async == "undefined") {
options.async = true;
}
// 处理请求成功的回调函数
xhr.onload = function(){
if (xhr.status >= 200 && xhr.status < 300) {
if (typeof options.datatype == "undefined" || options.datatype == "json") {
if(typeof options.success === 'function'){
options.success(JSON.parse(xhr.responseText));
}
} else {
if(typeof options.success === 'function'){
options.success(xhr.responseText);
}
}
} else {
if(typeof options.error === 'function'){
options.error(xhr.statusText);
}
}
}
// 处理请求错误的回调函数
xhr.onerror = function() {
if(typeof options.error === 'function'){
options.error(xhr.statusText);
}
}
// 设置请求头部
if (options.headers) {
for (var header in options.headers) {
xhr.setRequestHeader(header, options.headers[header]);
}
}
// 设置请求方法、URL、是否异步、发送请求
if (type == "GET") {
xhr.open(type, options.url + "?" + params, options.async);
xhr.send(null);
} else if (type == "POST") {
xhr.open(type, options.url, options.async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
function formsParams(data) {
var arr = [];
for (var prop in data) {
arr.push(prop + "=" + data[prop]);
}
return arr.join("&");
}
}
// 使用
ajax({
url: "api.php",// 请求地址
type: "POST",// 请求方式
async: true,// 同步：false，异步：true，默认为true
datatype: "json",// 返回数据的格式，"json","text"，默认为json
headers: {},// 设置请求头部，{"token": "123456"}
data: {// post数据
code: "s2sdd",
link: location.href
},
success: function (res) {// 处理请求成功
console.log(res);
},
error: function (res) {// 处理请求错误
console.log(res);
}
})
-
jQuery ajax如何同步请求
https://www.zzwws.cn/archives/5451/
2021-07-30T14:01:00+08:00
由于$.post() 和 $.get() 默认是 异步请求，如果需要同步请求，则可以进行如下使用：在$.post()前把ajax设置为同步：$.ajaxSettings.async = false;
在$.post()后把ajax改回为异步：$.ajaxSettings.async = true;
如：$.ajaxSettings.async = false;
$.post("/finance/getLastTimeCard", data, function(result) {
// 请求处理
},"json");
$.ajaxSettings.async = true;
$.ajax设置同步，加个async: false就可以了$.ajax({
type:"post",
url:"login.php",
data:{name:"name",password:"password"},
datatype: "json",
async: false,
success:function(data){
}
});
ajax请求数据，并怎么将数据赋值给全局变量因为ajax本身是异步执行的，导致内部定义的任何变量外部无法调用，解决方式为在ajax中添加async: false属性，变异步为同步，这样就可以使success方法中定义的全局变量在ajax外调用啦。
-
Layui导出长数字变科学计数解决方法
https://www.zzwws.cn/archives/5037/
2021-03-24T14:10:50+08:00
在导出时遇到导出后的数据变科学计数，导致数据不准确，在field中返回数据时，使用templet进行处理下即可！table.render({
elem: '',
url: '',
method: 'post',
cols: [[
{type:'checkbox'}
,{field:'id',title:'ID',width:80,sort:true}
,{field:'order_number',title:'订单编号',sort: true,templet:function(d){
return d.order_number+"\t";
}}
]]
})
-
PHP连接数据库，通过接受post请求实现增删改查
https://www.zzwws.cn/archives/4954/
2020-11-18T15:00:00+08:00
1.html文件：<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<title>PHP连接数据库实现增删改查</title>
</head>
<body>
<div>
<input type="text" name="daiHao" placeholder="代号">
<input type="text" name="keMu" placeholder="科目">
<input type="text" name="jieShu" placeholder="节数">
<button class="tianJia">添加</button>
<button class="shanChu">删除</button>
<button class="xiuGai">修改</button>
<button class="chaZhao">查找</button>
</div>
<p>提示：添加可以填3个，删除只填代号，修改可以填科目和节数然后需要改哪个填代号，查询填科目和节数。</p>
<table>
<tbody>
<!-- <tr>
<th>代号</th>
<th>科目</th>
<th>节数</th>
</tr> -->
</tbody>
</table>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
function teVal(){
daiHao = $('[name="daiHao"]').val();
keMu = $('[name="keMu"]').val();
jieShu = $('[name="jieShu"]').val();
arr = '<tr><th>代号</th><th>科目</th><th>节数</th></tr>';
}
$.post('1.php',{a: 'synr'},function(ret){
teVal();
// console.log(ret);
if(ret[0].code == '200'){
// alert(ret[0].msg);
for(var i = 1;i < ret.length;i++){
arr += '<tr><td>'+ret[i].c_id+'</td><td>'+ret[i].c_name+'</td><td>'+ret[i].t_id+'</td></tr>';
}
$('tbody').html(arr);
}else{
alert(ret[0].msg);
}
})
//添加
$('.tianJia').on('click',function(){
teVal();
if(keMu == '' && jieShu == ''){
alert('请输入你要添加的内容！');
}else if(daiHao == ''){
alert('请输入你要添加的内容！');
}else{
$.post('1.php',{a: 'tianJia',c_id: daiHao,c_name: keMu,t_id: jieShu},function(ret){
// console.log(ret);
if(ret.code == '200'){
alert(ret.msg);
location.reload();
}else{
alert(ret.msg);
}
})
}
})
//删除
$('.shanChu').on('click',function(){
teVal();
if(daiHao != ''){
var res = confirm('是否删除？');
if(res){
$.post('1.php',{a: 'shanChu',c_id: daiHao},function(ret){
if(ret.code == '200'){
alert(ret.msg);
location.reload();
}else{
alert(ret.msg);
}
})
}
}else{
alert('请输入你要删除的代号！');
}
})
//修改
$('.xiuGai').on('click',function(){
teVal();
if(keMu != '' || jieShu != ''){
var res = confirm('是否修改？');
if(res){
$.post('1.php',{a: 'xiuGai',c_id: daiHao,c_name: keMu,t_id: jieShu},function(ret){
// console.log(ret);
if(ret.code == '200'){
alert(ret.msg);
location.reload();
}else{
alert(ret.msg);
}
})
}
}else{
alert('请输入你要修改的内容！');
}
})
//查找
$('.chaZhao').on('click',function(){
teVal();
if(keMu != '' || jieShu != ''){
$.post('1.php',{a: 'chaZhao',c_id: daiHao,c_name: keMu,t_id: jieShu},function(ret){
// console.log(ret)
if(ret[0].code == '200'){
// alert(ret[0].msg);
for(var i = 1;i < ret.length;i++){
arr += '<tr><td>'+ret[i].c_id+'</td><td>'+ret[i].c_name+'</td><td>'+ret[i].t_id+'</td></tr>';
}
$('tbody').html(arr);
}else{
alert(ret[0].msg);
}
})
}
})
</script>
</body>
</html>
1.php文件：<?php
$conn = mysqli_connect('localhost','cs','123456','cs','3306');//主机名或 IP 地址，MySQL用户名，MySQL密码，规定默认使用的数据库，MySQL服务器的端口号，规定 socket 或要使用的已命名 pipe
if (!$conn) {
die("连接错误: " . mysqli_connect_error());
}
// var_dump($conn);
mysqli_query($conn,"set names utf8");//设置数据库编码为utf8
header('content-type: application/json;charset=utf-8');//输出为json格式，并设置编码为utf-8
//全局
$c_id = isset($_POST['c_id']) ? trim($_POST['c_id']) : '';
$c_name = isset($_POST['c_name']) ? trim($_POST['c_name']) : '';
$t_id = isset($_POST['t_id']) ? trim($_POST['t_id']) : '';
//添加
function tianJia(){
$conn = $GLOBALS['conn'];//引用全局作用域中可用的全部变量
$c_id = $GLOBALS['c_id'];
$c_name = $GLOBALS['c_name'];
$t_id = $GLOBALS['t_id'];
$sql = "insert into course (c_id,c_name,t_id) values ('$c_id','$c_name','$t_id')";//添加
$result = mysqli_query($conn,$sql);
if($result){
return json_encode(array('code' => '200','msg' => '添加成功'));
}else{
return json_encode(array('code' => '400','msg' => '添加失败'));
}
}
//删除
function shanChu(){
$conn = $GLOBALS['conn'];
$c_id = $GLOBALS['c_id'];
$sql = "delete from course where c_id='$c_id'";//删除
$result = mysqli_query($conn,$sql);
if($result){
return json_encode(array('code' => '200','msg' => '删除成功'));
}else{
return json_encode(array('code' => '400','msg' => '删除失败'));
}
}
//修改
function xiuGai(){
$conn = $GLOBALS['conn'];
$c_id = $GLOBALS['c_id'];
$c_name = $GLOBALS['c_name'];
$t_id = $GLOBALS['t_id'];
if($c_name != ''){
$s = "c_name='$c_name'";
}else if($t_id != ''){
$s = "t_id='$t_id'";
}else if($c_name != '' && $t_id != ''){
$s = "c_name='$c_name',t_id='$t_id'";
}
$sql = "update course set $s where c_id='$c_id'";//修改
$result = mysqli_query($conn,$sql);
if($result){
return json_encode(array('code' => '200','msg' => '修改成功'));
}else{
return json_encode(array('code' => '400','msg' => '修改失败'));
}
}
//查找
function chaZhao(){
$conn = $GLOBALS['conn'];
$c_id = $GLOBALS['c_id'];
$c_name = $GLOBALS['c_name'];
$t_id = $GLOBALS['t_id'];
if($c_name != ''){
$s = "c_name='$c_name'";
}else if($t_id != ''){
$s = "t_id='$t_id'";
}else if($c_name != '' && $t_id != ''){
$s = "c_name='$c_name' and t_id='$t_id'";
}
$sql = "select * from course where $s";//查找
$result = mysqli_query($conn,$sql);
$arr = array();//建一个空数组
$arr[] = array('code' => '200','msg' => '查找成功');//赋值到空数组里
while ($row = mysqli_fetch_assoc($result)) {//通过while循环获取
$arr[] = $row;
}
if($result){
return json_encode($arr);
}else{
return json_encode(array('code' => '400','msg' => '查找失败'));
}
}
//所有内容
function synr(){
$conn = $GLOBALS['conn'];
$sql = 'select * from course';
$result = mysqli_query($conn,$sql);
$arr = array();
$arr[] = array('code' => '200','msg' => '获取成功');
while ($row = mysqli_fetch_assoc($result)) {//通过while循环获取
$arr[] = $row;
}
// print_r($arr);
if($result){
return json_encode($arr);
}else{
return json_encode(array('code' => '400','msg' => '获取失败'));
}
}
//转换成数组
// $result = mysqli_query($conn,$sql);//对数据库执行一次查询
// $row = mysqli_fetch_array($result,MYSQLI_ASSOC);//函数从结果集中取得一行作为关联数组，或数字数组。 MYSQLI_ASSOC,MYSQLI_NUM,MYSQLI_BOTH（默认）
// print_r($row);
//mysqli_fetch_assoc($result);//关联数组
//mysqli_fetch_row($result);//数字数组
//错误提示
function bc(){
return json_encode(array('code' => '400', 'msg' => '操作失败'));
}
$a = isset($_POST['a']) ? trim($_POST['a']) : '';
switch ($a){
case "tianJia": // 添加
echo tianJia();
break;
case "shanChu": // 删除
echo shanChu();
break;
case "xiuGai": // 修改
echo xiuGai();
break;
case "chaZhao": // 查找
echo chaZhao();
break;
case "synr":
echo synr();
break;
default:
echo bc();
mysqli_close($conn);//关闭先前打开的数据库连接
}
?>
数据库表下载地址：https://zhizun.lanzoux.com/iuicqiiigxi
-
PHP分页类库，支持ajax模式和普通的跳转模式，内含demo例子
https://www.zzwws.cn/archives/4936/
2020-11-11T15:38:00+08:00
介绍：没有任何依赖，可在任何环境下使用，开箱即用 简单灵活好用，多个样式可选，支持 ajax 模式 和 普通的跳转模式，如：[?|&]page=1 和 pathInfo /page/1 等模式点击跳转分页时不会漏掉其他url原有的参数安装：方式1：使用 composer 命令安装：composer require tcwei/page 方式2：也可直接在 src找到 Page.php 类库文件，直接拖到你的类目录内，include 该文件可直接使用使用：简单使用：include 'Page.php';
use tcwei\smallTools\Page;
$pageClass = new Page();
$totle = 100;//总条数
$pageHtml = $pageClass->getPageHtml($totle);
echo $pageHtml;
例子1 pathInfo模式：$pageClass = new Page();
//选择分页样式： 可选用样式：flickr、blackRed、youtube、viciao
$pageClass->pageType = 'flickr';
//分页位置，如：左、中、右；可不设置，使用默认位置
$pageClass->pageAlign = 'center';
//鼠标移动到按钮时按钮的背景颜色设置,可不设置使用默认值
$pageClass->hoverBgColor = '#00a0e9';
//鼠标移动到按钮时按钮的页码数字颜色设置,可不设置使用默认值
$pageClass->hoverFontColor = '#fff';
//当前页码的字体颜色
$pageClass->nowPageFontColor = '#ff0084';
$totle = 100;
//第2个参数是每页显示多少条数据，第3个参数是显示多少个分页按钮，第4个参数是显示...和最后一个页码
$pageHtml = $pageClass->getPageHtml($totle, 10, 7, true);
例子2 ajax 模式：请到 demo-ajax 中查看完整示例include "../vendor/autoload.php";
use tcwei\smallTools\Page;
$pageClass = new Page();
//开启 ajax 模式
$pageClass->isAajx = true;
//前端进行ajax分页请求数据的函数名，需要前端定义该函数； 要在 ajax 的回调内执行 pageAjaxLock = true; 进行解锁，解锁后才能进行下一次ajax分页触发，这是防止用户多次重复点击
$pageClass->ajaxFunctionName = 'getList()';
//假设有100列数据
$totle = 100;
$pageHtml = $pageClass->getPageHtml($totle);
参数介绍：$pageClass->autoAddUrlInfo默认为3 是否开启自动补全路由信息，仅在 pathInfo 模式下有效，即自动补全路由参数不足3个的在后面自动追加index，如：/admin/index 跳转页码时会自动变成/admin/index/index/page/X 会多添加一个/index补全3个路由参数 如果不需要自动补全传入0；$pageClass->requestUri如果是 swoole 启动的服务，需要传入$pageClass->requestUri = $request->server['request_uri'] ，不是swoole直接忽略该参数$pageClass->isAjax是否开启ajax模式，默认为false$pageClass->urlType默认是0 设置URL的类型，是 pathInfo 模式，即 .../page/X设置为1为普通模式，page是$_GET获取，即 ?page=X 或 &page=X$pageClass->pageType默认 flickr分页样式选择，可选样式：flickr、blackRed、youtube、viciao也可以自定义样式，如：$pageClass->pageType = 'myStyle';前端写样式：.tcweiPageMain .myStyle{}//分页main样式
.tcweiPageMain .myStyle a{}//跳转按钮样式
.tcweiPageMain .myStyle a:hover{}//鼠标移到按钮时的样式
.tcweiPageMain .myStyle span.current{}//当前页码的样式
.tcweiPageMain .myStyle a:active{}//点击按钮时的样式
.tcweiPageMain .myStyle span.disabled{}//不可点击的按钮样式
$pageClass->pageAlign每个样式的默认位置不一样分页组件的位置，可选：left 、 center 、 right$pageClass->hoverBgColor鼠标移动到按钮时按钮的背景颜色设置,可不设置使用默认值$pageClass->hoverFontColor鼠标移动到按钮时按钮的页码数字颜色设置,可不设置使用默认值$pageClass->nowPageFontColor当前页码的字体颜色$pageClass->getPageHtml() 共有9个参数getPageHtml($totle, $onePageDisplayNum = 10, $showNumList = 7, $showNumListType = true, $showText = false, $showPrevNext = true, $showHome = true, $showSelect = false, $url = null)
1)$totle int 传入数据的总条数
2)$onePageDisplayNum int 每页显示条数
3)$showNumList int 数字页码按钮显示几个
4)$showNumListType bool 决定 $showNumList 的模式，true时，会在 $showNumList 后面显示...尾页按钮，默认显示
5)$showText bool 是否显示行数页数等文字信息，默认不显示，如上面说的 “1-10/100 记录” 这个数据显示
6)$showPrevNext bool 是否显示 上一页、下一页 俩个按钮，默认显示
7)$showHome bool 是否显示 首页、尾页 俩个按钮，默认显示
8)$showSelect bool 是否显示下拉选择页码的部分，默认不显示
9)$url string 传入自定义跳转的url，如传入： https://www.baidu.com?page= 或者 https://www.baidu.com/page/ 后面的页码会自动添加
github：https://github.com/ITzhiwei/page下载地址：https://zhizun.lanzoux.com/i2Cg2ia9b3g
-
随机今日诗词网HTML源码
https://www.zzwws.cn/archives/3521/
2020-04-27T16:23:55+08:00
采用ajax加载采集，接口对接官方API，全自动采集，源码上传解压缩直接就可以访问，纯HTML的！下载地址：https://www.lanzouy.com/ibzw22h
-
jQuery实现文件编码成base64并通过AJAX上传的方法
https://www.zzwws.cn/archives/2581/
2020-01-03T17:21:00+08:00
本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。分享给大家供大家参考，具体如下：使用AJAX是无法直接上传文件的，一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。如此做可以达到比较好的浏览器兼容性，不过代码量会比较大，即使是使用了文件上传插件，例如plupload。如何能达到灵活的程度呢，能像普通的AJAX提交表单数据那样将文件看成是普通表单参数来对待就好了。灵光一闪，利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~开始动手，丰衣足食。<?php
// 后端对文件数据解码并保存
if (!empty($_POST)) {
$dir = base64_upload($_POST['fileBase64'], 'jpg', 'img');
exit(json_encode(['img' => $dir]));
}
function base64_upload($content, $suffix, $dir = 'topic', $filename = '')
{
$content = preg_replace('/data:.*;base64,/i', '', $content);
$content = base64_decode($content);
if(!$content){
return;
}
$path = '/upload/' . $dir . '/' . date('Ymd') . '/';
$root = $_SERVER['DOCUMENT_ROOT'];
if ($filename) {
$name = $filename . '.' . $suffix;
} else {
$name = md5(time() . mt_rand(0, 999)) . '.' . $suffix;
}
if (!is_dir($root . $path)) {
mkdir($root . $path, 0777, true);
}
$route = $path . $name;
try {
file_put_contents($root . $path . $name, $content);
} catch (\Throwable $th) {
//throw $th;
$route = '';
}
return $route;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form onsubmit="return false;">
<input type="file" id="fileup">
<img src="" class="img" style="width: 200px;">
<input type="submit" value="submit" class="submit">
</form>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 前端对文件进行base64编码并通过ajax向服务器传输
var fileBase64 = '';
$("#fileup").change(function() {
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(e) {
console.log(e.target.result);
fileBase64 = e.target.result;
$('.img').attr('src', e.target.result);
};
});
$('.submit').on('click', function() {
$.post('', {
fileBase64: fileBase64
}, function(res) {
console.log(res);
}, 'json')
})
</script>
</body>
</html>
javascript里的FileReader对象主流浏览器都支持，IE10以上支持，我觉得在为小范围提供服务时可以考虑这个异步上传文件的方式，省时又省力，兼容IE系列另当别论。Reference:FileReader - Web API Interfaces | MDN
-
JQuery ajax 实例详解
https://www.zzwws.cn/archives/2508/
2019-12-31T16:43:00+08:00
$.ajax({
type: "post",//提交数据的类型 post get
url: "login.html",//提交的网址
data: {//提交的数据
name: "name",
password: "password"
},
dataType: "json",//"xml", "html", "script", "json", "jsonp", "text" //返回数据的格式
contentType: "application/x-www-form-urlencoded",//发送数据到服务器时所使用的内容类型
timeout: 10000,//设置请求超时时间（毫秒）
async: true,//异步为true，同步为false，默认为true
beforeSend: function(){//在请求之前调用的函数
$("#msg").html("logining");
},
success: function(res){//成功返回之后调用的函数
$("#msg").html(decodeURI(res));
},
error: function(){//调用出错执行的函数
//请求出错处理
},
complete: function(XMLHttpRequest, textStatus){//调用执行后调用的函数
alert(XMLHttpRequest.responseText);
alert(textStatus);
}
});
什么是AjaxAjax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。由上面的定义可以看出，Ajax的主要目的是为了，在不需要重新加载整个网页的前提下，使网页的一部分更新。同时，为了实现部分更新，就需要前端和后台之间的数据交换，包括前端向后台提交数据和前端从后台读取数据。Ajax基本结构因为学习的是jQuery中Ajax方法，所以所说的结构即是$.ajax()的结构。$.ajax()方法中的参数很多，我在实例中使用的只是一小部分，这里只介绍实例中所需要的参数的使用，其余更多参数还将继续学习。$.ajax({
url:"发送请求（提交或读取数据）的地址",
dataType:"预期服务器返回数据的类型",
type:"请求方式",
async:"true/false",
data:{发送到/读取后台（服务器）的数据},
success:function(data){请求成功时执行},
error:function(){请求失败时执行}
});
注：（这些参数均为选填，如果不设置，按默认值处理） url 默认为当前页地址 dataType 可用类型：（如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递）1、xml：返回XML文档，可用JQuery处理。2、html：返回纯文本HTML信息。3、script：返回纯文本JavaScript代码。4、json：返回json数据。/5、jsonp：(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。6、text：返回纯文本字符串。说明：对于json和jsonp的区别，本小白暂时没有深入了解，目前只知道json可以跨域读取数据，有待进一步学习~ type 可用类型主要为post和get两种（默认为get）1、get：从指定的资源请求数据（从服务器读取数据）2、post：向指定的资源提交要被处理的数据（向服务器提交数据） async 异步方式，默认为true，即异步方式。当设置为false时，为同步方式。异步方式：ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发ajax里的success方法，这时候执行的是两个线程。同步方式：在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。说明：这里的同步和异步有待深入理解，以下实例均使用默认的异步方式 data 请求的数据，{ }中可以填入多项数据。如果不填（一般为get请求），则读取对应地址的全部数据，此时可以在console中通过console.log(data)显示数据情况。 success 和 error 两个函数 一般需要设置，方便确定请求是否成功，以及请求成功后的提示或是对数据的处理和显示。
-
ajax和axios请求本地json数据
https://www.zzwws.cn/archives/2270/
2019-12-17T14:39:00+08:00
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术,通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax请求本地jsontest.json
{
"data":[
{"id":"1","nick":"濮阳南风"},
{"id":"2","nick":"茅云蔚"},
{"id":"3","nick":"箕建"},
{"id":"4","nick":"表振"},
{"id":"5","nick":"鞠腾骏"}
]
}
代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "test.json", //json文件位置
type: "get", //请求方式为get
dataType: "json", //返回数据格式为json
success: function(ret) { //请求成功完成后要执行的方法
var str = '';
for (var i in ret.data) {//使用for in遍历数据
str += '<div>'+ret.data[i].id+'、昵称：'+ret.data[i].nick+'</div>';
}
$('.box').html(str);
}
})
</script>
</body>
</html>
遍历数据也可以使用$.each方法遍历var str = '';
$.each(ret.data, function(i,item) {
str += '<div>'+item.id+'、昵称：'+item.nick+'</div>';
})
$('.box').html(str);
如果是获取一条数据，不用循环的，可以直接获取，比如ret.data.ip，或者也可以用$.parseJSON获取{"code":"200","msg":"success","data":{"ip":"220.181.38.148","city":"北京市","area":"电信互联网数据中心"}}
代码：var strJson = JSON.stringify(ret);
var data = $.parseJSON(strJson);
var str = '<div><span>'+data.data.city+'</span> <span>'+data.data.area+'</span><br><span>'+data.data.ip+'</span></div>';
$('.box').html(str);
效果如下：axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端1、 从浏览器制作XMLHttpRequests2、 让HTTP从node.js的请求3、 支持Promise API4、 拦截请求和响应5、 转换请求和响应数据6、 取消请求7、 自动转换为JSON数据8、 客户端支持防止XSRFaxios请求本地json相关依赖安装1：npm安装npm install axios --save
2.在main.js下引用axiosimport axios from 'axios'
一切环境依赖搭建好之后下面来写个例子：axios请求本地json1：在static文件夹底下新建json文件，（ 本地JSON文件一定要需放在static文件夹之下。）访问服务器文件，应该把 json文件放在最外层的static文件夹，这个文件夹是vue-cli内置服务器向外暴露的静态文件夹2：test.json数据格式如下：{
"data":[
{"id":"1","nick":"濮阳南风"},
{"id":"2","nick":"茅云蔚"},
{"id":"3","nick":"箕建"},
{"id":"4","nick":"表振"},
{"id":"5","nick":"鞠腾骏"}
]
}
3：写一个axiosgetData() {
axios.get('../../static/test.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
4：整体代码如下：<template>
<div id="app">
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
itemList: []
}
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get('../../static/test.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
}
</script>
5：然后在console控制台可以看到显示。区别总结axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。axios是ajax ajax不止axios
-
Vue项目实用经验
https://www.zzwws.cn/archives/1880/
2019-11-01T09:49:00+08:00
开始vue项目首先安装node下载地址：https://nodejs.org/zh-cn/然后安装vue-cli脚手架npm install -g vue-cli
vue-cli项目第一步创建名为 zhizun的项目~~.....
$ vue init webpack zhizun
项目回答Project name：项目名称
Project description：项目描述
Author：作者
Runtime-only：构建方式，分为独立构建和运行构建，默认选择 standalone
vue-router：是否安装路由
ESLint： ESLint规范，有标准的缩进、空格等规范 可以选 N
Set up unit tests: N
Setup e2e tests with Nightwatch： N
完成后，执行进入到项目文件里$ cd zhizun
本地服务器运行，出来一个测试地址$ npm run dev
····································································安装cnpm淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 ui 框架$ cnpm install element-ui -S
使用方式在入口文件 main.js中引入import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)
····································································需要打包stylus$ cnpm install stylus stylus-loader -S
打包css文件$ cnpm install css-loader style-loader -S
需要打包scss$ cnpm install node-sass sass-loader -S
需要打包less$ cnpm install less less-loader -S
····································································安装 axioscnpm install axios -S
1、全局使用方式使用方式，在入口文件main.js中添加import axios from 'axios'
Vue.prototype.$axios = axios
操作写法：this.$axios.get('/api/index.json')
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
在 config/index.js 中添加proxyTable: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/static/data'
}
}
}
在 .gitignore 文件中，再添加 【不被webpack打包】static/data
yarn-error.log* static/data # Editor
2、局部使用方式哪个页面需要就添加到哪里import axios from 'axios'
····································································组件如何使用先写好一个如 header.vue的组件在需要的页面中执行如下步骤1、引入组件import header from '@/pages/common/Header'
2、组件注册 data () {
},
components: {
header
}
3、组件渲染在页面，在页面的中写入<header></header>
父子组件传值：父组件<home-header :lists="headerData"></home-header>
data () {
return {
headerData: []
}
}子组件接受：props: {
list: Array
}或者是：prop: ["list"]
传方法：父组件<home-header :open="handelClick()"></home-header>
methods: {
handelClick (可接受一个来自子组件的值) {
console.log("hahaha")
}
}
子组件：
<button @click="getData()"></button>
methods: {
getData () {
this.$emit("open",可传一个值到父组件)
}
}
最后的最后测试完成后打包上线$ npm run build
生成一个dist文件,里面的文件+api文件 就可直接上传到服务器····································································如何运行vue项目1、安装cnpmnpm install -g cnpm --registry=http://registry.npm.taobao.org
2、安装webpackcnpm install webpack -g
3、安装vue-clicnpm install vue-cli -g
以上有安装过的，可以直接执行以下命令4、cd /项目名称cd zhizun
5、npm installcnpm install
6、npm run devcnpm run dev
报错提示npm ERR! missing script: dev执行cnpm run serve
如果不行就输入vue init webpack初始化将package.json中丢失的修复，然后cnpm intall安装依赖，最后cnpm run dev即可！
npm ERR! path将no such file 或者 directory,access中指明的文件路径中的node_modules删除，然后再重新cnpm intall
Module build failed:BrowserslistError:删除.browserslistrc文件就好了
npm ERR! code ELIFECYCLEcnpm cache clean --force
rm -rf node_modules //删除指定文件或文件夹
rm -rf package-lock.json
cnpm install
cnpm install 成功之后再次启动 cnpm start