Jquery 使用Ajax读取Json的数据!

太过爱你忘了你带给我的痛 2023-10-05 09:36 27阅读 0赞

提供的接口地址: https://www.jisuapi.com/api/recipe/

### 菜谱搜索: ###

效果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

HTML:

CSS:

body {
    				background: wheat;
    			}
    
    			#div2 p {
    			 	margin: 0px;
    				position: relative;
    				height: 40px;
    				top: -350px;
    				left: 250px;
    				height: 32px; 
    				margin-bottom: 2px;
    			 } 
    
    			#div1 {}
    
    			/* 内容 */
    			.img1Div>h2 {
    				width: 60%;
    				background: lavenderblush;
    				text-indent: 30px;
    				font-size: 15px;
    				font-weight: lighter;
    				line-height: 30px;
    
    			}
    
    			.img1 {
    				padding-bottom: 10px;
    			}
    
    
    			.pp {
    				color: #ffffff;
    				font-size: 25px;
    				background: cadetblue;
    				width: 150px;
    				text-align: center;
    			}
    
    			.span1 {
    				width: 100px;
    				display: inline-block;
    
    			}
    
    			#div4 {
    				width: 40%;
    				display: flex;
    				justify-content: space-around;
    				flex-wrap: wrap;
    			}
    
    			#div4 h4{
    				font-weight: bolder;
    				color:coral;
    			}
    
    			.span2 {
    				line-height: 30px;
    				width: 200px;
    				height: 200px;
    				text-align: center;
    				padding: 20px;
    			}
    
    			.imgs {
    				border-radius: 50%;
    			}
    			
    			#div2{
    				height: 10px;
    			}

Jquery:

#### **注意:导入对应的jquery包哦!** ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020090417462078.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70