Ajax的XMLHttpRequest的open方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浏览器通过JS控制输入的地址参数不同获取服务器内容(只能兼容IE10及以上的浏览器)</title> <style> body{font-family: ‘宋体‘;} .wrap{width:95%;min-height: 350px;margin:0 auto;} .title{width:100%;font-size: 18px;color:#b34810;line-height: 37px;border-bottom:2px solid #b34810;} .search_tab{width:100%;height:70px;font-size: 14px;color:#b34810;} .search_tab tr{height:70px;line-height: 70px;} .td_left{text-align: right;} .pub_select{width:60px;height:24px;border:1px solid #999999;} .search_btn{width:80px;height:30px;line-height: 30px;border:0;text-align: center;color:#000000;padding-left: 25px;background: url(‘images/pub_btn_bj_03.jpg‘) no-repeat 0 0;} .content_tab{width:100%;height:227px;border:2px solid #d9d7b3;text-align: center;border-collapse: collapse;} .content_tab tr td{height:36px;line-height: 36px;border: 1px solid #d9d7b3;} .content_tab_tr{font-size: 16px;font-weight: bold;color:#000; font-weight: bold;">#f5f1df;} .content_tab_tr td{border:0;} .content_tab {height:160px;} .tab_foot{text-align: right;padding-right:8px;} #cont_info{text-align: left;line-height:25px;padding:5px; } </style> <script type="text/javascript"> var yearNum=2016,weekNum=44,opt1,opt2; //文档加载完毕，运行request()函数 window.onload=function(){ request(); }; //动态获取输入框所选年份 function showValue1(obj){ var opt_11=obj.options[obj.selectedIndex]; opt1=opt_11.value; yearNum=opt1; console.log(opt1); } //动态获取输入框所选周数 function showValue2(obj){ var opt_22=obj.options[obj.selectedIndex]; opt2=opt_22.value; weekNum=opt2; console.log(opt2); } //点击查询按钮传参进request()函数更改传入的地址参数 function setDate(a,b){ yearNum=a; weekNum=b; request(); } function request(){
var request = new XMLHttpRequest(); request.open(‘GET‘, ‘http://lvchuang.f3322.net:88/SiChuanShuiYuanDi/Handler/WeekData.ashx?‘+‘year=‘+yearNum+‘&‘+‘week=‘+weekNum, false); request.send(null);
if (request.status === 200) { var acceptText=JSON.parse(request.responseText); console.log(acceptText); document.getElementById("time_info").innerHTML=acceptText.Year+"年"+" "+"第"+acceptText.Week+"周"+" "+"("+acceptText.PublishTime+"发布"+")"; document.getElementById("cont_info").innerHTML=acceptText.Detail; } } </script></head>
<body><div class="wrap"> <h1 class="title">查询条件</h1> <table class="search_tab"> <tr> <td class="td_left" style="width: 20%;">年度：</td> <td> <select class="pub_select" id="year_select" onchange="showValue1(this)"> <option>2016</option> <option>2015</option> <option>2014</option> </select> </td> <td class="td_left">周数：</td> <td> <select class="pub_select" id="week_select" onchange="showValue2(this)"> <option>44</option> <option>47</option> <option>50</option> </select> </td> <td> <button type="button" class="search_btn" onclick="setDate(opt1,opt2)">查询</button> </td> </tr> </table> <table class="content_tab"> <tr> <td class="content_tab_tr">水质自动检测周报</td> </tr> <tr> <td id="time_info"></td> </tr> <tr> <td id="cont_info"></td> </tr> <tr> <td class="tab_foot">监测总站</td> </tr> </table></div></body></html>
时间： 2024-10-14 06:49:36