Jquery 使用Ajax读取Json的数据!

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

菜谱搜索:

效果:

HTML:

	<div id="div1">
		</div>
		<div id="div2" >
		</div>
		<div id="div3">
		</div>
		<div id="div4">
		</div>

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:

<script type="text/javascript">
		function getajax() {
			$.ajax({
				type: "get",
				url: "text/cp.json",
				async: true,
				success: function(res) {
					var lis = res.result.list;
					//醋溜白菜介绍
					for (var i = 0; i < lis.length; i++) {
						var img1 = $("<img class='img1' src ='" + lis[i].pic + "'/>" +
							"<div class='img1Div'><h2 >" +
							lis[i].content + "</h2><div/>")
						$("#div1").html(img1)
						$("#div2").html($(
							"<p class='pp'>" +
							lis[i].name + "</p>" +
							"<p><strong>食用人数：</strong>" + lis[i].peoplenum + "</p>" +
							"<p><strong>烹饪时间：</strong>" + lis[i].cookingtime + "</p>" +
							"<p><strong>热蒸时间：</strong>" + lis[i].cookingtime + "</p>" +
							"<p><strong>功效：</strong>" + lis[i].tag + "<p/>"
						))
						//醋溜白菜功效
						for (var j = 0; j < lis[i].material.length; j++) {
							var span1 = $("<span class='span1'>" + lis[i].material[j].mname + '：' + lis[i].material[
								j].amount + "</span>")
							$("#div3").append(span1)

						}
						//食材
						for (var j = 0; j < lis[i].process.length; j++) {
							var span2 = $("<div class='span2'><img class='imgs' src='" + lis[i].process[j].pic + "'/><h4>" + lis[i].process[
									j].pcontent +
								"</h4></div>")
							$("#div4").append(span2)

						}
					}

				}
			})
		}
		//调用
		getajax()
	</script>

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