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);
}
})
]]>在$.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外调用啦。
]]>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";
}}
]]
})
]]>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);//关闭先前打开的数据库连接
}
?>
]]>没有任何依赖,可在任何环境下使用,开箱即用 简单灵活好用,多个样式可选,支持 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/ 后面的页码会自动添加
]]>采用ajax加载采集,接口对接官方API,全自动采集,
源码上传解压缩直接就可以访问,纯HTML的!
]]>使用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
$.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);
}
});
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
由上面的定义可以看出,Ajax的主要目的是为了,在不需要重新加载整个网页的前提下,使网页的一部分更新。同时,为了实现部分更新,就需要前端和后台之间的数据交换,包括前端向后台提交数据和前端从后台读取数据。
因为学习的是jQuery中Ajax方法,所以所说的结构即是$.ajax()的结构。
$.ajax()方法中的参数很多,我在实例中使用的只是一小部分,这里只介绍实例中所需要的参数的使用,其余更多参数还将继续学习。
$.ajax({
url:"发送请求(提交或读取数据)的地址",
dataType:"预期服务器返回数据的类型",
type:"请求方式",
async:"true/false",
data:{发送到/读取后台(服务器)的数据},
success:function(data){请求成功时执行},
error:function(){请求失败时执行}
});
注:(这些参数均为选填,如果不设置,按默认值处理)
<1> url 默认为当前页地址
<2> 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可以跨域读取数据,有待进一步学习~
<3> type 可用类型主要为post和get两种(默认为get)
1、get:从指定的资源请求数据(从服务器读取数据)
2、post:向指定的资源提交要被处理的数据(向服务器提交数据)
<4> async 异步方式,默认为true,即异步方式。当设置为false时,为同步方式。
异步方式:ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发ajax里的success方法,这时候执行的是两个线程。
同步方式:在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
说明:这里的同步和异步有待深入理解,以下实例均使用默认的异步方式
<5> data 请求的数据,{ }中可以填入多项数据。如果不填(一般为get请求),则读取对应地址的全部数据,此时可以在console中通过console.log(data)显示数据情况。
<6> success 和 error 两个函数 一般需要设置,方便确定请求是否成功,以及请求成功后的提示或是对数据的处理和显示。
]]>ajax请求本地json
test.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、 从浏览器制作XMLHttpRequests
2、 让HTTP从node.js的请求
3、 支持Promise API
4、 拦截请求和响应
5、 转换请求和响应数据
6、 取消请求
7、 自动转换为JSON数据
8、 客户端支持防止XSRF
axios请求本地json
相关依赖
安装
1:npm安装
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
一切环境依赖搭建好之后
下面来写个例子:axios请求本地json
1:在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:写一个axios
getData() {
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
]]>首先安装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
····································································
安装 axios
cnpm 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'
····································································
组件如何使用
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文件 就可直接上传到服务器
····································································
1、安装cnpm
npm install -g cnpm --registry=http://registry.npm.taobao.org
2、安装webpack
cnpm install webpack -g
3、安装vue-cli
cnpm install vue-cli -g
以上有安装过的,可以直接执行以下命令
4、cd /项目名称
cd zhizun
5、npm install
cnpm install
6、npm run dev
cnpm 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 ELIFECYCLE
cnpm cache clean --force
rm -rf node_modules //删除指定文件或文件夹
rm -rf package-lock.json
cnpm install
cnpm install 成功之后再次启动 cnpm start
]]>