原生js select选择后 ajax获取数据渲染table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.5.1.min.js"></script>
    <style>
        .jsbox {
     
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .slt {
     
            margin-left: 60px;
        }
        select {
     
            width: 120px;
            height: 35px;
            font-size: 18px;
        }
        table {
     
            height: auto;
            width: auto;
        }
        th {
     
            width: 200px;
            background-color: beige;
        }
        td {
     
            width: 200px;
            text-align: center;
            height: 35px;
        }

    </style>
</head>
<body>
    <div class="jsbox">
        <div class="slt">
            <select id='select' onchange=''>
                <option value=''>请选择</option>
                <option value='195'>195</option>
                <option value='223'>233</option>
                <option value='v1'>v1</option>
                <option value='online'>online</option>
            </select>
        </div>
        <br/>
        <p id='descbox'></p>
        <table border="1" cellspacing="0" cellpadding="0">
            <thead id='thead'></thead>
            <tbody id='tbody'></tbody>
        </table>
    </div>
</body>
<script>
    $("#select").change(function(){
     
        let table = document.getElementsByTagName("table");
        let thead = document.getElementById("thead");
        let tbody = document.getElementById("tbody");
        $('#tbody').empty()
        $.ajax({
     
            type: "post",
            url: '/common/check',  
            async: false,	
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify({
     
                env: $(this).val()
            }),
            success: function(res) {
     
                let tableData = res.data.job
                let tableDataArr = tableData[0];
                let str = "";
                let _str = "";
                str += ``;
                str += `res`;
                str += `code`;
                for (let key in tableData[0].checkResult) {
      
                    str += `${
       key}`;
                }
                str += ``;
                thead.innerHTML = str;
                for (let i = 0; i < tableData.length; i++) {
     
                    let obj = tableData[i].checkResult;
                    _str += ``;
                    _str += `${
       tableData[i].res}`;
                    _str += `${
       tableData[i].code}`;
                    for (let k in obj) {
     
                        if(k === 'md5Result') {
     
                            _str += `

${ Object.keys(obj[k])}${ obj[k][Object.keys(obj[k])]}

`
; } else { _str += `${ obj[k]}`; } } _str += ``; } tbody.innerHTML += _str; }, error: function (data) { let descbox = document.getElementById("descbox"); } }); }); </script> </html>

两三年没写原生… 这个需求真的搞懵了,样式没有要求我就随便写了,要求速度快就写的比较乱

react万岁

ajax跨域忘了怎么搞,渲染用的本地数据

let res = {
     
	"code": 0,
	"data": {
     
		"job": [
			{
     
				"res": " 18634 Mon Dec 28 10:42:02 2020  1-01:03:23 java -jar job.jar --serverno=1 --loghome=/data/tmp/logs/argus/job/job_1/\n",
				"code": 0,
				"checkResult": {
     
					"serviceName": "job",
					"serviceIp": "192.168.10.233",
					"baseIp": null,
					"checkCmd": "ps -eo pid,lstart,etime,cmd|grep job.jar|grep -v grep",
					"pid": 18634,
					"runCmd": "java -jar job.jar --serverno=1 --loghome=/data/tmp/logs/argus/job/job_1/",
					"survived": true,
					"startTime": "Mon Dec 28 10:42:02 2020",
					"runtTime": "1-01:03:23",
					"md5Result": {
     
						"/data/projects/job.jar": "93b94d95cd635a357311f512f6b7fde0"
					}
				}
			},
			{
     
				"res": " 20953 Thu Dec 10 17:54:43 2020 18-17:52:55 java -jar job.jar --serverno=1\n",
				"code": 0,
				"checkResult": {
     
					"serviceName": "job",
					"serviceIp": "192.168.10.195",
					"baseIp": null,
					"checkCmd": "ps -eo pid,lstart,etime,cmd|grep job.jar|grep -v grep",
					"pid": 20953,
					"runCmd": "java -jar job.jar --serverno=1",
					"survived": true,
					"startTime": "Thu Dec 10 17:54:43 2020",
					"runtTime": "18-17:52:55",
					"md5Result": {
     
						"/data/projects/job.jar": "20835f3cb545e8c46798e5979eb3c060"
					}
				}
			}
		]
	},
	"desc": "done"
}

你可能感兴趣的:(javascript,html,原生,javascript,ajax)