1.jQuery获取表格中的数据,2.参数传给后端,3.使用Ajax动态加载技术。作为一个后端,写前端jQuery痛苦的教训

痛苦的教训:
业务要求:点击删除操作实现删除数据库的数据对应数据。
在这里插入图片描述
第一步肯定要,获得点击这个按钮对应的编号,也就是id,数据库根据id删除数据。
后端的我已经写好好(包括控制层,处理层,数据层)
主要难题是在前端获取数据,并转给后端。
1.获取这个按钮上对行的对应编号
this可以选中当前按钮,parents可以选中按钮所在单元格的当前行,然后用find寻找当前行里做了标记的id,然后取值text;
var param = $(this).parents().find("#nui").text();
2.获取这个按钮上对行的对应编号
把取到的这个值作为参数转给后端。
var Parameters ={“id”:param.toString()}
$.ajax({
type: “get”,
url: “doDeleteObjects”,
data: Parameters,
success: function(result){
alert(result)
}
});

因为使用get请求,所以不能单单传个param给后端,必须以entry键值对的形式传给后端,所以声明一个变量把param放在entry里,key必须和后端接收参数的名字一直,value就是param的值。
因为在这里踩坑,尝试了直接用连接调用后端业务。
错误:http://localhost:8090/doDeleteObjects?8
正确:http://localhost:8090/doDeleteObjects?id=8
必须要id=8的形式才能正确调用佛藕断数据,证明传给后端的也是id=xx;所以这里用键值对传给后端。
var Parameters ={“id”:param.toString()}
var Parameters ={“id”:param}
param是否一定要toString操作呢?并不是,而是一定要以键值对的形式传给后端。并且key和后端参数的名字一致。

这里踩了三个坑,
1.获取按钮对应行的id;
$(this).parents().eq(1).find("#nb").text();
还有一种写法
$(this).parent().siblings().first().text();
通过直接父类获取父类兄弟,取第一个。
这里一定要写eq(1),我现在还没搞明白为什么

写这笔记过去了一天,现在明白了为什么要写eq(1)了,
因为batton的parents为:父:td;爷爷:tr;祖宗是table。
所以加个eq(1) 表示从选中tr这层,在这层才能找到,batton对应的id。

2.把值传给后端,一定要用键值对
错误:http://localhost:8090/doDeleteObjects?8
正确:http://localhost:8090/doDeleteObjects?id=8
单单传一个参数,后端只拿到一个数字,没有名称,mvc就没办法创建这个对象去引用这个值。所以用键值对,这里面的key就是id,value是8,这样子,MVC才能创建一个对象 int id = 8;
3.第三个坑就是没有把前后端的参数名统一。

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值