zoukankan html css js c++ java

ajax之百度应用实例

<input type="text" id="inp"/>
		<ul id="wdList">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>

<script type="text/javascript">
//			https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aa&cb=jQuery1102048553532222285867_1456368977799
			var oInp = document.getElementById("inp");
			var body = document.getElementsByTagName("body")[0];
			var wdList = document.getElementById("wdList").getElementsByTagName("a");
			window.onkeyup = function(){
				createScript();
			}
			function createScript(){
				var oScript = document.createElement("script");
				oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+oInp.value+"&cb=jh";	
				body.appendChild(oScript);
				body.removeChild(oScript);
			}
    //这里用参数接受回调函数 所有有形参json
			function jh(json){
				for(var i=0;i<wdList.length;i++){
					wdList[i].innerHTML = json.s[i];
					wdList[i].onclick = function(){
						oInp.value = this.innerHTML;
						console.log(oInp.value)
						window.location.href = "https://www.baidu.com/s?wd="+oInp.value;
						return false;
					}
				}
			}
		</script>

　　借用百度的数据！

自动创建 dom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="inp"/>
		<ul id="wdList">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
		<script type="text/javascript">
//			https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aa&cb=jQuery1102048553532222285867_1456368977799
			var oInp = document.getElementById("inp");
			var body = document.getElementsByTagName("body")[0];
			var wdList = document.getElementById("wdList").getElementsByTagName("a");
			window.onkeyup = function(){
				createScript();
			}
			function createScript(){
				var oScript = document.createElement("script");
				oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+oInp.value+"&cb=syz";	
				body.appendChild(oScript);
				body.removeChild(oScript);
			}
			function syz(json){
				for(var i=0;i<wdList.length;i++){
					wdList[i].innerHTML = json.s[i];
					wdList[i].onclick = function(){
						oInp.value = this.innerHTML;
						console.log(oInp.value)
						window.location.href = "https://www.baidu.com/s?wd="+oInp.value;
						return false;
					}
				}
			}
		</script>
	</body>
</html>

查看全文

相关阅读:
flume采集log4j日志到kafka
解决spring 事务管理默认不支持SQLException等运行时异常
 基于黑名单的xss过滤器
 VMware创建Linux虚拟机并安装CentOS(三)
dubbo 常见错误
 Dubbo与Zookeeper、SpringMVC整合和使用（负载均衡、容错）
zookeeper工作原理、安装配置、工具命令简介
 VMware创建Linux虚拟机并安装CentOS(二)
NSPredicate谓词
 IOS网络请求之NSURLSession使用详解

原文地址：https://www.cnblogs.com/mingjixiaohui/p/5246869.html

ajax之百度 应用实例

ajax之百度应用实例