html 元素定位与接口请求总结

1.下拉框

环境： 测试 生产

 

<select id="sid" onchange="" style="margin-right: 20px; width: 100px;">
 <option id="dev" value="dev">测试</option>
<option id="prod" value="prod">生产</option>
 </select>

 元素定位：

<script>
function getEnvironment() {
        var env = document.getElementById("sid");
        var index = env.selectedIndex;
        var value = env[index].value;
        return value;
    }
</script>

或者

 

数据来源:

测试 生产

<b>数据来源:</b>
<select id="sid" onchange=""
 style="margin-right: 20px; width: 100px;">
<option data-id="dev" value="XXX">测试</option>
 <option data-id="prod" value="XXX">生产</option>
</select>

　　

<script>
function getEnvironment() {
        env = $('#sid').find('option').not(function() {
				return !this.selected;
			}).data("id");
        return env;
    }
</script>

2.元素定位方式

var articleIds = jQuery("#article_id").val();

var title = $("#title").val(); 

var value = $( `#${id}`).val(); #传参形式的。

 

3.前端触发接口请求

#get请求

var lest;
function getChannel(event) {
        lest = event.timeStamp;
        setTimeout(function () {
            if (lest - event.timeStamp == 0) {
                console.log(lest - event.timeStamp)
                var environment = getEnvironment();
                console.log(environment);
                var channel_name = jQuery("#searchChannel").val();
                console.log(channel_name);
                let url = "/smartTools/ruleMath/get_channel/";
                $.get(url, { env: environment, channel_name: channel_name }, function (res) {
                    var str = "";
                    console.log(res)
                    for (var i = 0; i < res.length; i++) {
                        str += "<option id='choise' value='" + res[i]["rule_desc"] + "' data-value='" + res[i]["channel"] + "'></option>"
                    }
                    $("#searchResult").html(str)
                })
            }
        }, 500);

#get请求02

function getCheckResult() {

        var environment = getEnvironment();
        console.log(environment)
        var ChoiseChannel = getChoiseChannel();
        console.log(ChoiseChannel)
        var articleIds = getArticleID();
        console.log(articleIds)
        let url = "http://127.0.0.1:8000/smartTools/ruleMath/check_rule";
        $.get(url, { env: environment, channel_code: ChoiseChannel, article_id: articleIds }, function (res) {
            console.log(res)
            document.getElementById('get_check_result').innerHTML = syntaxHighlight(res);
        })
    }

　

post请求

<script>
		function MyUpload() {
		    let files = document.getElementById("myfile").files;
            let data = new FormData();
		    data.append('file', files[0]);
		    $.ajax({
                type: "POST",
                url: "/smartTools/caseHelper/caseUpload/",
                data: data,
                processData: false,
                contentType: false,
                error: function(result) {
                    alert(result.responseText);
                },
                success: function (result) {
                    let $eleBtn = $("#case_download");
                    $eleBtn.click(function() {
                            let $eleForm = $("<form method='get'></form>")
                            $eleForm.attr("action", "/smartTools/caseHelper/caseDownload/" + result);
                            $("#download_area").append($eleForm);
                            $eleForm.submit();
                        })
                    document.getElementById("download_file_name").innerHTML = result;
                    let download_area = document.getElementById("download_area");
                    download_area.style.display = "block";
                }
            })

        }
    </script>

post请求02

$.ajax({
            type: 'POST',
            url: 'searchAppSecret/',
            data: {
                    "ts":timestamp,
                    "channel":channel,
                    "env":env
                  },
            datatype: 'json',
            success: function(response){
                    $('#request_url').val(response.search_channel)
                    $('#response_data').val(response.app_response)
                },
            error: function(){
                alert('查询失败')
                }
            })
        return false;
    }

　　post请求03

function select_data() {
        start_time = getText("start_time")
        end_time = getText("end_time")
        var end_time_13 = Date.parse(new Date(end_time));
        var start_time_13 = Date.parse(new Date(start_time));
        if (end_time_13 - start_time_13 > 10 * 60 * 1000 | start_time_13 < Date.parse(new Date(setTime(0))) - 3 * 24 * 60 * 60 * 1000) {
            alert("最大支持检索近3天的10分钟内的数据")
        } else {
            var obj = {};
            obj.title = getText("title");
            obj.id = getText("articleId");
            obj.sourceId = getText("sourceId");
            obj.mediaId = getText("mediaId");
            obj.env = getEnvironment();
            obj.topic = getTopic();
            obj.start_time = start_time_13;
            obj.end_time = end_time_13;
            $.ajax(
                {
                    type: 'POST',
                    url: 'xxxxxxxx',
                    data: JSON.stringify(obj),
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': "application/json; charset=utf-8"
                    },
                    success: function (response) {
                        console.log('请求成功')
                    },
                }
            )
        };
    }