第一次前后台数据获取的经验

Posted 2020-09-19

这几天学了ajax请求和node的路由，在这里总结一下。

要求是要从前端发一个请求到后台，后台到mysql里去拿数据，并且返回到前端，并显示到页面上。

我是这样做的。我用ajax 发了一个请求到后台，用后台发送数据过来。

把这些数据用for循环，循环里面声明一个元素，里面的数据用mysql 的数据。声明好后直接添加到网页上。

 

$.ajax({
url:"http://127.0.0.1:8000/F5",
type:"get",
success:function(data,status){
for(var i = 0;i<data.length;i++){
var d1;
if(data[i].class == "class1"){
d1 =‘<option selected value ="class1">class1</option>\
<option value ="class2">class2</option>‘
}else{
d1 =‘<option value ="class1">class1</option>\
<option selected value ="class2">class2</option>‘
}
var str = ‘<tr>‘+
‘<td>‘+data[i].id+‘</td>‘+
‘<td><input type="text" value=‘+"‘"+data[i].name+"‘"+‘ disabled="true"/></td>‘+
‘<td><input type="text" value=‘+"‘"+data[i].age+"‘"+‘ disabled="true"/></td>‘+
‘<td><input type="text" value=‘+"‘"+data[i].phone+"‘"+‘ disabled="true"/></td>‘+
‘<td><select disabled>‘+d1+‘</select>‘+
‘<td>‘+
‘<button class="delete">删除</button>‘+
‘<button class="ok">修改</button>‘+
‘</td>‘+
‘</tr>‘;

 

//添加到gg这个元素前面

$("#gg").before(str);

 

//因为刚添加上来的没有绑定点击事件。所以我直接全部取消点击事件，在下面重新绑定
$(".delete").unbind();
$(".ok").unbind();

 

//绑定点击事件

$(".delete").click(function(){
del(this)
});
$(".ok").click(function(){
go(this)
});

}
}
});