前端表单提交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);
}
});