前后端交互相关细节功能

前端表单提交ajax相关代码片段

引入jqurey

<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
<script type="text/javascript" src="js/openip.js"></script>//封装的ajax的url

openip.js代码

function openip($str){
	var myip = "http://192.168.1.130/chenqianAdmin/public/index.php/api/"+$str;
	return myip;
}

绑定from的id

<form  id="form1">

调用方法提交

<input type="image" name="sumbit" onclick="backadd()" id="sumbit" src="images/btn.png">

ajax调用后端完成表单提交

//反馈提交
		function backadd() {
			var formData = new FormData($("#form1")[0]);
			//serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法
			$.ajax({
				type: "post",
				url: "http://192.168.1.130/chenqianAdmin/public/index.php/api/Freedback/backAdd", //数据传输的控制器方法
				data: formData, //这里data传递过去的是序列化以后的字符串
				cache: false,
				processData: false,
				contentType: false,
				success: function(data) {
					console.log(data);
				}
			});
		};

前台根据id进行a标签绑定跳转

//a标签根据id跳转
 <a href="news.html?id=${data[i].id}" class="biaoqii" style="width: 80px;height: 30px;line-height: 30px; center;display: block;margin: auto;text-align: center;border: 1px solid gray;">查看详情<a>

完整代码从后端获取数据，显示在前台，前台根据id进行a标签绑定跳转

var str = '';
				$.ajax({
					type: "post",
					url: openip("news/lists"),
					async: true,
					dataType: 'json',
					success: function(data) {
						for (var i = 0; i < 6; i++) {
				  
							str +=
								`
								<div style="width: 30%;height: 223px;float: left;margin-left: 20px;margin-top: 40px;">
													  <div class="cont" style="width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 18px;border-bottom: 1px solid gainsboro;">${data[i].title}</div>
													  <div class="cont" style="width: 95%;height: 100px;padding: 10px 8px;">
														 <p> ${data[i].connent}</p> 
													  </div>
													  <div style="width: 100%;height: 50px;line-height: 50px;">
														  <a href="news.html?id=${data[i].id}" class="biaoqii" style="width: 80px;height: 30px;line-height: 30px; center;display: block;margin: auto;text-align: center;border: 1px solid gray;">查看详情<a>
													  </div>
								</div>	
							`
						}
						$("#xinwen").append(str);
					},
					error: function(err) {
						console.log(err);
					}
				});

接收跳转的id，并且显示跳转id的相关数据

var aa = window.location.search.split("id=")[1] ; //获取id当前地址
					//alert(aa);
				var str = '';
				$.ajax({
					type: "post",
					url: openip("news/lists"),
					async: true,
					dataType: 'json',
					data: aa,
					success: function(data) {
						//alert(data.length);
						for(var i=0;i<data.length;i++){
							if(data[i].id==aa){
								var date = new Date(data[i].time*1000);//时间戳转换，十位的数字转换*1000，十三位的不需要*
								Y = date.getFullYear() + '-';
								M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
								D = date.getDate() + ' ';
								h = date.getHours() + ':';
								m = date.getMinutes() + ':';
								s = date.getSeconds(); 
								var shijian = Y+M+D+h+m+s;
								console.log(shijian); 
								str +=
								`
								 <div style="width: 100%;height: 50px; line-height: 50px;text-align: center;font-size: 22px;">${data[i].title}</div>
								 <div style="width:100%;height:40px;line-height:40px;text-align: center;">发布时间:${shijian}</div>
								 	<p style="font-size: 16px;text-indent: 2rem;margin-top: 20px;line-height:40px;">${data[i].connent} </p>
									
									
								`
							}
							
						}
						$("#con").append(str);
						console.log(data);
				 
					},
				
				
					error: function(err) {
						console.log(err);
					}
				});