react--仿百度搜索（原生jsonp）

最新推荐文章于 2024-09-02 09:21:54 发布

guoxiaxing

最新推荐文章于 2024-09-02 09:21:54 发布

阅读量663

点赞数

分类专栏：前端框架文章标签： react 原生jsonp

本文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/80725646

版权

这是一个使用React构建的仿百度搜索功能，通过原生JSONP进行跨域数据请求。当用户在输入框中输入内容时，会触发一个事件，创建并添加一个script标签，其src属性包含搜索关键字和回调函数名。数据返回后，回调函数`haha`会被执行，将搜索结果动态渲染到页面上。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>react--父子组件通信</title>  
    <script src='react.js'></script>  
    <script src='react-dom.js'></script>  
    <script src='babel.min.js'></script>  
    <style>
		.con{
			width:200px;
			height: 200px;
			border:1px solid green;
			margin-top: 10px;
		}
		.active{
			background-color: pink;
		}
    </style>
</head>  
<body>  
    <div id='example'></div> 
    <script>
    	function haha(data){
    		var ul = document.getElementsByTagName('ul')[0];
    		//清除先前数据
    		ul.innerHTML = '';
    		//返回请求数据
    		let len = data.s.length;
    		for(var i=0;i<len;i++){
    			let li = document.createElement('li');
    			li.innerHTML =