AJAX的前后端数据交互,JSON传输
首先是简单的,后台传回前端json,前端的处理
数据库查询
String sql = "SELECT name,url,id FROM websites";
List<String> list_name=new ArrayList<String>();//创建取结果的列表,之所以使用列表,不用数组,因为现在还不知道结果有多少,不能确定数组长度,所有先用list接收,然后转为数组
List<String> list_url=new ArrayList<String>();
List<String> list_id=new ArrayList<String>();
rs= stmt.executeQuery(sql);
while (rs.next()) {
list_name.add("name:'"+rs.getString(1)+"'");
list_url.add("url:'"+rs.getString(2)+"'");
list_id.add("id:'"+rs.getString(3)+"'");
}
List<String> list=new ArrayList<String>();
for (int i = 0; i < list_name.size(); i++) {
list.add("{"+list_name.get(i)+","+list_url.get(i)+","+list_id.get(i)+"}");
}
后台代码
//防止乱码
response.setContentType("text/html;charset=UTF-8");
//返回的数据,集合转json返回
response.getWriter().print(JSONArray.fromObject(list).toString());`
前台的ajax接收和使用
$.ajax({
type: "post",
url: "service",
data: {"order":"sel"},
dataType: "json",
success: function(data){
$.each(data, function(i){
$("#upda_del tbody").append("<tr id='"+data[i].id+"'> <td id='navigation-name"+data[i].id+"'>"+data[i].name+"</td><td id='navigation-url"+data[i].id+"'>"+data[i].url+"</td><td>"+"<button class='layui-btn layui-btn-xs update'>修改</button>"+"<button class='layui-btn layui-btn-danger layui-btn-xs delet'>删除</button></td></tr>");
});
}
});
前台传到后台的处理
前端
$.ajax({
type:"post",
url:"../../servlet/navigation_service",
data:{"data":JSON.stringify(data.field)},
dataType:"json",
success: function(data){
console.log(data);
}
});
service后台接收
先以字符串的形式飞一下
String add_music = request.getParameter("data");
使用
JSONObject jsonobject = JSONObject.fromObject(add_music);//json字符串转json对象
String sql = "INSERT INTO adb_music(title,author,src,lrc,pic)values(?,?,?,?,?)";
PreparedStatement ptmt = (PreparedStatement) conn.prepareStatement(sql); //预编译SQL,减少sql执行
ptmt.setString(1,jsonobject.getString("title"));//使用json里面key为title的字段
ptmt.setString(2,jsonobject.getString("author"));
ptmt.setString(3,jsonobject.getString("src"));
ptmt.setString(4,jsonobject.getString("lrc"));
ptmt.setString(5,jsonobject.getString("pic"));
System.out.println("歌名:"+jsonobject.getString("title")+"歌手:"+jsonobject.getString("author")+"链接:"+jsonobject.getString("src")+"歌词:"+jsonobject.getString("lrc")+"头像:"+jsonobject.getString("pic"));
jar包