前端开发小随笔

最新推荐文章于 2023-10-30 10:45:02 发布

北辰1208

最新推荐文章于 2023-10-30 10:45:02 发布

阅读量184

点赞数

分类专栏： python学习

本文链接：https://blog.csdn.net/bie961208/article/details/81545069

版权

python学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本人不是专业的前端人员。最近在做小程序的开发用到了一些前端知识，页面不好看主要的还是功能的实现。重点在于前后端的交互。一个简单的前端页面，使用ajax与后台进行交互，后台代码参考另一篇博客。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>标题</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            background-color: #EAEAEA;
        }
        div{
            width: 1000px;
            height: 150px;
            background-color: #E0FFFF;
        }
        .center-in-center{
            position: absolute;
            top: 20%;
            left: 15%;
        }
    </style>
    <style type="text/css">
    .div {
    display: inline-block;
    padding: .3em .5em;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px black;
    color:white;
    font-weight: bold;
    }
    .div:active{
        box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
        border-color: rgba(0,0,0,.3);
        background: #bbb;
    }
    </style>
</head>

<body>
<div class="center-in-center">
<div align="center" >
    <b><p align="left">内容</p></b>

    <td>日期:</td>
    <select type="date" id="date" name="date" style="width:200px;height:25px"></select>


    <td>环境:</td>
    <select id="envi" name="envi" onchange="get_ips()" style="width:200px;height:25px"></select>

</div>

<div align="center">
    <td>应用选择:</td>
    <select id="app" name="app" onchange="get_ips()" style="width:200px;height:25px"></select>

    <td>IP选择:</td>
        <select id="ip" name="ip" style="width:200px;height:25px"></select>


    <button id="index" class="div" style="margin-left:20px" onclick="send_user_info() ">确定</button>
</div>

<div align="center">
    <b><a id="address" href="114.114.114.114/logs" onclick="send_user_info()">地址</a></b>
</div>
</div>

<script src="static/js/jquery-1.11.3.min.js"></script>

<script>

    function load_date()
    {
        $.ajax({            //ajax方法实现前后端交互
            url:'/get_date',    //请求的url
            type:'get',        //请求方式
            dataType:'json',
            success:function(res)    //请求成功的动作
            {
                console.log(res);    //输出日志
                datelist = res["datelist"];
                for (var i=0; i<datelist.length; i++)
                {
                    var str = "<option>" + datelist[i] + "</option>";
                    console.log(str);
                    $("#date").append(str);   //给id是date的dom元素添加str
                }
            }
        });

    }

    function load_envi()
    {
        $.ajax({
            url:'/get_envi',
            type:'get',
            dataType:'json',
            success:function(res)
            {
                console.log(res);
                envi = res["envi"];
                for (var i=0; i<envi.length; i++)
                {
                    var str = "<option>" + envi[i] + "</option>";
                    console.log(str);
                    $("#envi").append(str);
                }
            }
        });
    }

    function load_appnames()
    {
        $.ajax({
            url:'/get_appnames',
            type:'get',
            dataType:'json',
            success:function(res)
            {
                console.log(res);
                appnames = res["appnames"];
                for (var i=0; i<appnames.length; i++)
                {
                    var str = "<option>" + appnames[i] + "</option>";
                    //console.log(str);
                    $("#app").append(str);
                }
            }
        });
    }

    load_appnames();    调用函数
    load_envi();
    load_date();

    function get_ips()
    {

        var appname = $("#app").val();
        var envi = $("#envi").val();
        console.log(envi);
        //console.log(res);
        var data = {"appname":appname,"envi":envi};    //封装参数
        $.ajax({
            url:'/get_ips',
            type:'get',
            data:data,
            dataType:'json',
            success:function(res)
            {
                $("#ip").empty();    //清空id=ip的元素
                $("#ip").append("<option>ip选择</option>");
                ips = res["ips"];
                for (var i=0; i<ips.length; i++)
                {
                    var str = "<option>" + ips[i] + "</option>";
                    $("#ip").append(str);
                }
            }
        });
    }


    function send_user_info()
    {
        var date = $("#date").val();
        var app=$("#app").val();
        var ip=$("#ip").val();
        var envi=$("#envi").val();
        var data={
            data: JSON.stringify({
                "envi":envi,
                "date":date,
                "app":app,
                "ip":ip
            }),
        }

        if((ip=="")||(ip=="选择IP")){
            alert("请选择有效的IP！");
            return false;
        }
        else if((date=="")||(date==null)){
            alert("请选择有效的日期！");
            return false;
        }
        else if((app=="")||(app=="选择应用")){
        alert("请选择有效的应用！");
        }
        else {
        alert("Hello！");    //弹框
        }

        $.ajax({
            url:'/post',
            type:'post',
            data:data,
            dataType:'json',
            success:function(res){
                console.log(res);
            }
        });
        //alert("请耐心等待！");
    }

</script>

</body>
</html>
```

北辰1208

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发小随笔

本人不是专业的前端人员。最近在做小程序的开发用到了一些前端知识，页面不好看主要的还是功能的实现。重点在于前后端的交互。一个简单的前端页面，使用ajax与后台进行交互，后台代码参考另一篇博客。&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/html"&gt;&lt;head&gt; &lt;title&gt;...
复制链接

扫一扫