二级联动+ajax

于 2022-01-20 10:15:00 发布
阅读量776 收藏
点赞数
文章标签： jquery js javascript ajax vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36996529/article/details/123896130
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            margin: 100px auto;
        }

        td {
            width: 160px;
            height: 20px;
            border: 1px solid #ddd;
            padding: 6px 8px;
        }

        .a1 {
            background: #878787;
            color: #fff;
            font-weight: bolder;
        }

        tr:hover {
            background: #71c671;
            color: #404040;
            /*font-weight: bolder;*/
        }

        td {
            text-align: center;
        }

        select {
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="fm">
    类型：
    <select id="type">
        <option>请选择</option>
    </select>
    序号：
    <select id="num">
        <option></option>
    </select>
    <button id="bt" class="bt">确定</button>
</div>
<div>
    <table border="1" class="table" id="tb1" style="text-align: center;">

    </table>
</div>
<!--信贷利率图-->
<div id="map1" style="width: 1200px;height:650px;"></div>
<!--抵押贷利率图-->
<div id="map2" style="width: 1200px;height:650px;"></div>
<!--表格-->
<script type="text/javascript">
    function show1() {
        $.ajax({
            type: "get",
            async: false,            //异步请求(同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行)
            url: submitData(),    //请求发送到TestServlet处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                var data = result.data;
                if (data) {
                    var s = "";
                    s = s + " <div>\n" +
                        "            <tr class=\"a1\">\n" +
                        "                <td>名称</td>\n" +
                        "                <td>" + data.name + "</td>\n" +
                        "                <td>不动产数量</td>\n" +
                        "                <td>" + data.home_number + "</td>\n" +
                        "                <td>公积金总额</td>\n" +
                        "                <td>" + data.gjj_sum + "</td>\n" +
                        "                <td>公积金平均数</td>\n" +
                        "                <td>" + data.gjj_avg + "</td>\n" +
                        "            </tr>\n" +
                        "        </div>\n" +
                        "        <tr>\n" +
                        "            <td>公积金为空/0的数量</td>\n" +
                        "            <td>" + data.gjj_nan + "</td>\n" +
                        "            <td>公积金变化趋势</td>\n" +
                        "            <td>" + data.gjj_state + "</td>\n" +
                        "            <td>社保总额</td>\n" +
                        "            <td>" + data.shebao_sum + "</td>\n" +
                        "            <td>社保平均值</td>\n" +
                        "            <td>" + data.shebao_avg + "</td>\n" +
                        "        </tr>\n" +
                        "        <tr>\n" +
                        "            <td>社保为空/0的数量</td>\n" +
                        "            <td>" + data.shebao_nan + "</td>\n" +
                        "            <td>社保变化趋势</td>\n" +
                        "            <td>" + data.shebao_state + "</td>\n" +
                        "            <td>医保总额</td>\n" +
                        "            <td>" + data.yibao_sum + "</td>\n" +
                        "            <td>医保平均值</td>\n" +
                        "            <td>" + data.yibao_avg + "</td>\n" +
                        "\n" +
                        "        </tr>\n" +
                        "        <tr>\n" +
                        "            <td>医保为空/0的数量</td>\n" +
                        "            <td>" + data.yibao_nan + "</td>\n" +
                        "            <td>医保变化趋势</td>\n" +
                        "            <td>" + data.yibao_state + "</td>\n" +
                        "            <td>公积金为空/0数量对应分数</td>\n" +
                        "            <td>" + data.gjj_nan_score + "</td>\n" +
                        "            <td>公积金变化趋势对应分数</td>\n" +
                        "            <td>" + data.gjj_state_score + "</td>\n" +
                        "        </tr>\n" +
                        "        <tr>\n" +
                        "            <td>社保为空/0数量对应分数</td>\n" +
                        "            <td>" + data.shebao_nan_score + "</td>\n" +
                        "            <td>社保变化趋势对应分数</td>\n" +
                        "            <td>" + data.shebao_state_score + "</td>\n" +
                        "            <td>医保为空/0数量对应分数</td>\n" +
                        "            <td>" + data.yibao_nan_score + "</td>\n" +
                        "            <td>医保变化趋势对应分数</td>\n" +
                        "            <td>" + data.yibao_state_score + "</td>\n" +
                        "\n" +
                        "        </tr>\n" +
                        "        <tr>\n" +
                        "            <td>公积金总额对应分数</td>\n" +
                        "            <td>" + data.gjj_sum_score + "</td>\n" +
                        "            <td>公积金平均值对应分数</td>\n" +
                        "            <td>" + data.gjj_avg_score + "</td>\n" +
                        "            <td>社保总额对应分数</td>\n" +
                        "            <td>" + data.shebao_sum_score + "</td>\n" +
                        "            <td>社保平均值对应分数</td>\n" +
                        "            <td>" + data.shebao_avg_score + "</td>\n" +
                        "\n" +
                        "        </tr>\n" +
                        "        <tr>\n" +
                        "            <td>不动产数量对应分数</td>\n" +
                        "            <td>" + data.home_number_score + "</td>\n" +
                        "            <td>还款意愿分数</td>\n" +
                        "            <td>" + data.desire_score + "</td>\n" +
                        "            <td>还款能力分数</td>\n" +
                        "            <td>" + data.ability_score + "</td>\n" +
                        "            <td>还款意愿能力总分数</td>\n" +
                        "            <td>" + data.score + "</td>\n" +
                        "\n" +
                        "        </tr>\n" +
                        "        <tr>\n" +
                        "            <td>违约率</td>\n" +
                        "            <td>" + data.defualt_rate + "</td>\n" +
                        "            <td>信用分数</td>\n" +
                        "            <td>" + data.credit_score + "</td>\n" +
                        "            <td>信用等级</td>\n" +
                        "            <td>" + data.credit_grade + "</td>\n" +
                        "            <td>授信率</td>\n" +
                        "            <td>" + data.credit_rate + "</td>\n" +
                        "        </tr>\n" +
                        "        <tr>\n" +
                        "            <td>信贷额度</td>\n" +
                        "            <td>" + data.credit_loan_amount + "</td>\n" +
                        "            <td>抵押贷额度</td>\n" +
                        "            <td>" + data.mortgage_loan_amount + "</td>\n" +
                        "            <td>医保总额对应分数</td>\n" +
                        "            <td>" + data.yibao_sum_score + "</td>\n" +
                        "            <td>医保平均值对应分数</td>\n" +
                        "            <td>" + data.yibao_avg_score + "</td>\n" +
                        "        </tr>";
                    $('#tb1').html(s)
                }
            }
        })

    }

</script>
<!--信贷利率图-->
<script type="text/javascript">
    function show2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map1'));
        // 指定图表的配置项和数据
        myChart.setOption({
            title: {
                text: '信贷利率'
            },
            tooltip: {},
            legend: {
                data: ['信贷利率']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '信贷利率',
                type: 'bar',
                data: []
            }]
        });

        myChart.showLoading();

        var names = [];    //类别数组(实际用来盛放X轴坐标值)
        var nums = [];    //销量数组(实际用来盛放Y坐标值)

        $.ajax({
            type: "get",
            async: false,            //异步请求(同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行)
            url: submitData(),    //请求发送到TestServlet处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                var data = result.data;
                if (data) {
                    for (var i = 0; i < data.xd.length; i++) {
                        names.push(i);    //挨个取出类别并填入类别数组
                    }
                    nums = data.xd;
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '信贷利率',
                            data: nums
                        }]
                    });

                }

            },
            error: function () {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })


    }
</script>
<!--抵押贷利率图-->
<script type="text/javascript">
    function show3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map2'));

        // 指定图表的配置项和数据
        myChart.setOption({
            title: {
                text: '抵押贷利率'
            },
            tooltip: {},
            legend: {
                data: ['抵押贷利率']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '抵押贷利率',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: "red",
                        lineStyle: {color: 'red'}
                    }
                },
                data: []
            }]
        });

        myChart.showLoading();

        var names = [];    //类别数组(实际用来盛放X轴坐标值)
        var nums = [];    //销量数组(实际用来盛放Y坐标值)

        $.ajax({
            type: "get",
            async: false,            //异步请求(同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行)
            url: submitData(),    //请求发送到TestServlet处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                var data = result.data;
                if (data) {
                    for (var i = 0; i < data.dyd.length; i++) {
                        names.push(i);    //挨个取出类别并填入类别数组
                    }
                    nums = data.dyd;
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '抵押贷利率',
                            data: nums
                        }]
                    });
                }

            },
            error: function () {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })

    }
</script>
<script type="text/javascript">
    var bt=document.getElementById('bt')
    bt.addEventListener("click",show1);
    bt.addEventListener("click",show2);
    bt.addEventListener("click",show3);
</script>

<!--select-->
<script type="text/javascript">
    var typeSelect = document.querySelector("#type");
    var numSelect = document.querySelector("#num");
    //构建数组
    var typeArr = ["qiye", "renyuan"];
    var numArr = [[], []];
    var typeIdenx = 0;
    for (let i = 0; i < 267; i++) {
        numArr[0].push(i)
    }
    for (let i = 0; i < 900; i++) {
        numArr[1].push(i)
    }

    //页面加载的时候根据类型数据源添加类型option
    for (var i = 0; i < typeArr.length; i++) {
        var typeOption = new Option([typeArr[i]]);
        typeSelect.options.add(typeOption);
    }

    //当类型做出change的时候出发change事件
    typeSelect.onchange = function (eve) {
        typeIdenx = eve.target.selectedIndex - 1;
        if (typeIdenx == -1) {
            numSelect.options.length = 0;
            return;
        } else {
            numSelect.options.length = 0;
            for (var j = 0; j < numArr[typeIdenx].length; j++) {
                var numOption = new Option(numArr[typeIdenx][j]);
                numSelect.options.add(numOption);
            }
        }
    }
</script>

<script type="text/javascript">
    function submitData() {
        var type = document.getElementById("type").value;
        var num = document.getElementById("num").value;
        if (type == "") {
            alert("类型不能为空");
            return "qiye/0";
        }
        if (num == "") {
            alert("序号不能为空")
            return "qiye/0";
        }
        return ""+type+"/"+num;
    }
</script>
</body>
</html>

`application.properties`

server.port=80
spring.web.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/templates/
spring.devtools.add-properties=false
logging.level.web=error
zs浪里小白龙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
使用ajax实现二级联动
doaram123的博客
07-21 2544
首先想要实现的二级联动效果，页面加载时从数据库调取省份的名字，并显示在jsp页面上，改变省份时后面出现该省对应的城市； 第一步，页面加载时，省份名字显示，首先是使用jdbc连接技术，从数据库查询省的名字和编号，package com.dao;import java.sql.Connection; import java.sql.PreparedStatement; import java.sq
php+ajax二级联动
11-29
php+ajax 二级联动 无刷新实现省市县联动。
ajax二级联动调用数据,ajax二级联动数据库
weixin_28744601的博客
08-06 255
ajax二级联动数据库 内容精选换一换GaussDB(for MySQL)支持数据库实例的备份和恢复，以保证数据可靠性。GaussDB(for MySQL)数据库通过Sysbench导入数据模型和一定量的数据，备份后压缩比约为80%。其中，重复数据越多，压缩率越高。压缩率=备份文件占用的空间/数据文件占用的空间*100%。压缩率=备份文件占用的空间/数据文件占用的空间*100GaussDB(for...
ajax二级联动
Master_chaoAndQi的博客
05-07 322
1需求分析        根据部门选择部门下的用户思路：采用两个下拉列表，一个下拉列表绑定部门，当下拉列表的值发生变化时，修改下拉列表2的数据，完成ajax二级联动1  静态页面准备两个下拉列表                        &lt;p style="width:200px;height:50px; "&gt;选择部门： &lt;select id="dept" s...
AJAX实现二级联动
qq_33210523的博客
05-23 1275
通过AJAX实现二级联动,先动态获取一级下拉列表,通过Onchange()事件,异步查询二级下拉列表内容,把内容写进标签,存入二级下拉列表中一级下拉列表动态获取列表内容 @ResponseBody @Permission("ST1000") @RequestMapping("/editParksite") public String editPosOperator(Pa
JAVA 二级联动菜单
wuxiangqian
03-12 479
&lt;%@ page language="java" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;二级菜单联动演示&lt;/title&gt; &lt;script type="text/javascript"&gt;
PHP+ajax实现二级联动菜单功能示例
10-18
主要介绍了PHP+ajax实现二级联动菜单功能,涉及php结合ajax的数据交互与页面元素动态操作相关实现技巧,需要的朋友可以参考下
基于asp+ajax和数据库驱动的二级联动菜单
10-29
基于asp+ajax和数据库驱动的二级联动菜单,需要的朋友可以参考下。
JS实现省市二级联动+AJAX省市县三级联动
10-17
包括两个资源：通过JS实现的二级省市联动、AJAX实现的省市县三级联动
ssh+jquery+ajax二级联动
08-04
自己写的很小的程序仅仅能实现二级联动功能，第一次上传，还不太懂
ajax+jquery二级联动实现
06-01
1、Jsp页面 <script> //为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery' var jQuery=$; </script> <script> //初始化数据 jQuery(document).ready(function(){ getProvince(); });
Ajax实现省市二级联动
10-25
ajax初级入门。 无刷新实现省市2级菜单联动。 代码简单，很容易明白。
一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)
01-02
一个强健 实用的ajax二级联动菜单(有演示和附源程序打包下载) 前些天在搞后台的时候要用到二级联动的菜单,到网上去找了半天也没找到满意的,不是这错就是那错,在选择的时候有时候不能返回.真是郁闷.     后来就看到有人用ajax写了无限级分类(牛,呵呵,本人看不懂.).就想到我那个后台不也可以用ajax试试,虽然比用javascript的慢点,但我这个实用.强健..不会出错,也不会选择某个大类后再返回无选择状态小类为空的状态.呵呵.文件目录:如图 主要代码如下:index.asp 代码如下:<%@LANGUAGE=”VBSCRIPT” CODEPAGE=”936″%> <!DOCTYPE h
jquery ajax实现省市二级联动
07-11
该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo，简单易懂，可以参考博客：http://blog.csdn.net/mockingbirds/article/details/46842327
ajax实现二级联动效果,使用 AjaxPro 来完成二级联动的效果
weixin_28733933的博客
08-06 192
现在在实现二级连动或是三级连动方面，都是采用ajax来完成的。网上的例子也很多。 我采用的是AjaxPro来完的。 如何配置AjaxPro我就不说了。BigClassid 前台页面＜script type="text/javascript"＞function ShowCity(id){var result = chen.getCityList(id).value;var ddlcity = doc...
JavaScript(10) ajax案例之二级联动json版
郑清
11-05 527
先上效果图： 前台页面： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/...
ajax实现二级联动
weixin_30510153的博客
05-07 100
用js实现简单的ajax二级联动（如上图） HTML代码： 1 省份：<select id="province" onchange="getCity();" > 2 <option>请选择--</option> 3 </select> 4 城市:<select id="city"> 5 ...
thymeleaf中可以使用ajax动态获取数据
热门推荐
majunzhu的博客
03-28 3万+
转：https://www.oschina.net/question/2820871_2237255$.ajax({ //使用JQuery内置的Ajax方法         type : "post", //post请求方式         async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）         url : "echarts/re...
jquery ajax实现二级联动
qq_38409944的博客
08-02 3165
前言： 还记得昨天看某位大佬的博客，看到了ajax实现二级联动，不由心痒痒也想实现一番，先贴上：链接：大佬的这篇博客 学习过程： 1. 于是我就去补了ajax，可是发现不行啊， https://blog.csdn.net/qq_38409944/article/details/81325662 2. 可是我只学过xml，ajax的数据传输主要是json，于是乎我又补了json，可是又...
ajax 省市二级联动
最新发布
10-18
ajax 省市二级联动是一种常见的前端技术，它可以实现在选择省份后，自动加载该省份下的城市列表，从而实现省市二级联动的效果。下面是一个简单的实现步骤： 1. 在 HTML 页面中，定义两个下拉框，一个用于选择省份，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zs浪里小白龙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值