至尊技术网 - ajax 2022-09-03T11:46:00+08:00 Typecho https://www.zzwws.cn/feed/atom/tag/ajax/ <![CDATA[原生js封装ajax]]> https://www.zzwws.cn/archives/6358/ 2022-09-03T11:46:00+08:00 2022-09-03T11:46:00+08:00 悠悠楠杉 http://www.zzwws.cn 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); } }) ]]> <![CDATA[jQuery ajax如何同步请求]]> https://www.zzwws.cn/archives/5451/ 2021-07-30T14:01:00+08:00 2021-07-30T14:01:00+08:00 悠悠楠杉 http://www.zzwws.cn 由于$.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外调用啦。

]]>
<![CDATA[Layui导出长数字变科学计数解决方法]]> https://www.zzwws.cn/archives/5037/ 2021-03-24T14:10:50+08:00 2021-03-24T14:10:50+08:00 悠悠楠杉 http://www.zzwws.cn 在导出时遇到导出后的数据变科学计数,导致数据不准确,在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";
                  }}
                ]]
            })
]]>
<![CDATA[PHP连接数据库,通过接受post请求实现增删改查]]> https://www.zzwws.cn/archives/4954/ 2020-11-18T15:00:00+08:00 2020-11-18T15:00:00+08:00 悠悠楠杉 http://www.zzwws.cn

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

]]>
<![CDATA[PHP分页类库,支持ajax模式和普通的跳转模式,内含demo例子]]> https://www.zzwws.cn/archives/4936/ 2020-11-11T15:38:00+08:00 2020-11-11T15:38:00+08:00 悠悠楠杉 http://www.zzwws.cn 介绍:

没有任何依赖,可在任何环境下使用,开箱即用 简单灵活好用,多个样式可选,支持 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

]]>
<![CDATA[随机今日诗词网HTML源码]]> https://www.zzwws.cn/archives/3521/ 2020-04-27T16:23:55+08:00 2020-04-27T16:23:55+08:00 悠悠楠杉 http://www.zzwws.cn

采用ajax加载采集,接口对接官方API,全自动采集,

源码上传解压缩直接就可以访问,纯HTML的!

下载地址:https://www.lanzouy.com/ibzw22h

]]>
<![CDATA[jQuery实现文件编码成base64并通过AJAX上传的方法]]> https://www.zzwws.cn/archives/2581/ 2020-01-03T17:21:00+08:00 2020-01-03T17:21:00+08:00 悠悠楠杉 http://www.zzwws.cn 本文实例讲述了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

]]>
<![CDATA[JQuery ajax 实例详解]]> https://www.zzwws.cn/archives/2508/ 2019-12-31T16:43:00+08:00 2019-12-31T16:43:00+08:00 悠悠楠杉 http://www.zzwws.cn $.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

Ajax 即“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(){请求失败时执行}
});

注:(这些参数均为选填,如果不设置,按默认值处理)

<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 两个函数 一般需要设置,方便确定请求是否成功,以及请求成功后的提示或是对数据的处理和显示。

]]>
<![CDATA[ajax和axios请求本地json数据]]> https://www.zzwws.cn/archives/2270/ 2019-12-17T14:39:00+08:00 2019-12-17T14:39:00+08:00 悠悠楠杉 http://www.zzwws.cn AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

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>&nbsp;<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

]]>
<![CDATA[Vue项目实用经验]]> https://www.zzwws.cn/archives/1880/ 2019-11-01T09:49:00+08:00 2019-11-01T09:49:00+08:00 悠悠楠杉 http://www.zzwws.cn 开始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

····································································
安装 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. 先写好一个如 header.vue的组件
  2. 在需要的页面中执行如下步骤

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、安装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

]]>