ajax+h5+url解析

最新推荐文章于 2025-04-23 14:41:35 发布
原创最新推荐文章于 2025-04-23 14:41:35 发布 · 3.9k 阅读
本内容遵循CC 4.0 BY-SA版权协议
本文介绍了一个HTML页面如何通过JavaScript实现与用户的交互，包括获取URL参数并填充到表单中，以及通过Ajax请求与服务器端进行数据交换，展示服务器返回的数据。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
        .container {
		/* background-color: gray; */
            width: 500px;
			height:500px;
			position:absolute;
			left:50%;
			margin-left:-250px;
			top:50%;
			margin-top:-190px
           /* 整个大的div的长度*/
        }
	.input {
    /* position: absolute; */
     font-size: 15px;
	height:30px;
	width: 500px;
}
.btton{
 font-size: 20px;
	height:30px;
	width: 90px;
}
	 </style>
</head>
<body>  
<div class="container">
    <form method=get action="http://localhost/cgi-bin/test6.cgi">       <!-- 跳转链接到cgi程序 -->
       url的值:<input class="input" id="result1" type="text" name="i1" value="点击获取按钮获得参数"/>
	   <p></p>
       bck_url的值:<input class="input" id="result2" type="text", name="i2" value="点击获取按钮获得参数"/>  
	    <p></p>
	    <p></p>
	   <input class="btton" id="modify" type='button' name="callcpp" value="获取参数" onclick="resCalc();"  />
	    <input class="btton" type="submit"/>  
     </form>  
</div>


<h2>获得cgi程序的返回值</h2>
<button type="button" onclick="loadXMLDoc()">返回数据</button>
<div id="myDiv"></div>

<!-- 在js中获取URL传递参数 -->
<script type="text/javascript">
        function UrlSearch() {
            var name, value;
            var str = "http://www.example.com/number_checking?{'url':'http://ovuhjq3qc.bkt.clouddn.com/2017-11-1617:20:22-920-.png','bkg_url':'http://ovuhjq3qc.bkt//.clouddn.com/2017-11-1617:20:22-921-.png'}"
			// var str = "http://www.example.com/number_checking?{'url':'htt/povuhjq3qc','bkg_url':'httpovuhjq3qc1'}"
            var num = str.indexOf("?")             // 获得接口?的位置 
            str = str.substr(num + 1); //取得所有参数  获得？后面的所有的字符串       
            str = str.substring(1, str.length - 1);          //字符串分割
            var arr = str.split(","); //各个参数放到数组里，参数以,分开     
            for (var i = 0; i < arr.length; i++) {
                num = arr[i].indexOf(":");        //获取：所在的位置
                if (num > 0) {
                    //name=arr[i].substring(0,num);
                    name = arr[i].substring(1, num - 1);     //获取参数的名称
                    value = arr[i].substr(num + 1);          //获得参数的值
                    value = value.substring(1, value.length - 1);      
                    this[name] = value;
                }
            }
        }
        var Request = new UrlSearch(); //实例化
        var url = Request.url;         //获得参数URL的值
        var bkg_url = Request.bkg_url; //获得参数bkg_url的值
    </script>

<!-- 	把获取的参数的值放在表单对应的框中 -->
<script type="text/javascript">
function resCalc()
{
var input1=document.getElementById("result1");
var input2=document.getElementById("result2");
var btn=document.getElementById("modify");
	input1.value=url;
	input2.value=bkg_url;
	//input2.value="78";

   alert("已获得参数值，请点击提交按钮进行提交数据");

 } 
</script>
<!-- Ajax数据请求，获得cgi程序的返回值 -->
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)          //AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();    //创建一个XMLHttpRequest 对象用于在后台与服务器交换数据
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");      //浏览器使用ActiveX 对象
  }
xmlhttp.onreadystatechange=function()           //onreadystatechange 是一个事件句柄。当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0                                                         (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)       //xmlHttp.status的值表示HTTP状态表，当值为200时表示交易成功 
    { 
		//VAR RESPONSEtEXT = XMLHTTP.RESPONSEtEXT;
		                        //         IF (RESPONSEtEXT){
		                       //               ALERT(RESPONSEtEXT);//SHOWiNFO("USERNAME_NOTICE",RESPONSEtEXT);
		                      //           }
		                      //   }ELSE{
		                      //           ALERT("ERROR!");
		                     //    }
	 var getStr=xmlhttp.responseText;       //获得返回的结果
	  var number = getStr.indexOf("{")       //获得的返回值把opencv第三方库的版权声明打印出来，c++中去不掉，这里把声明去掉
      //  var  getStr1 =getStr.substr(0,num + 1); //取得所有参数 
	  var  getStr1 =getStr.substr(number);     
		    alert(getStr1);
 // document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  document.getElementById("myDiv").innerHTML=getStr1;        //把获得的返回值放进myDiv中
	//var getStr=xmlhttp.responseText;
	//alert(getStr);
            var param = getStr1;
            var href = "http://www.baidu.com?param=" + param;      //把返回值链接到URL
            alert(href);
    }
  }

 // var url11="/cgi-bin/test2.cgi?i1=http%3A%2F%2Fovuhjq3qc.bkt.clouddn.com%2F2017-11-1617%3A20%3A22-920-.png&i2=http%3A%2F%2Fovuhjq3qc.bkt%2F%2F.clouddn.com%2F2017-11-1617%3A20%3A22-921-.png";
 //  var url11="/cgi-bin/test2.cgi";
xmlhttp.open("GET","/cgi-bin/test6.cgi",true);     //指向获得指定cgi的返回值
xmlhttp.send();
}
</script>

</body>  

</html>