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(); #传参形式的。

#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>

#post02
$.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;
    }