js中button的onclick事件上送两个参数到后台，完整前后端代码示例 |
您所在的位置：网站首页 › js点击事件onclick不触发 › js中button的onclick事件上送两个参数到后台，完整前后端代码示例 |
js中button的onclick事件上送两个参数到后台，完整前后端代码示例
|
前言
这次写博客的原因就是自己在学习过程中，想通过点击按钮，然后给后台传递更新表的参数，当时我查阅很多网上的文章，遇到了很多问题，基本上他们给出的方案都是很简单的解答，但是我的是根据后端返回的数据，动态的生成前端列表，所以那种简单的设置ID的方法不适用，我也费很大力气才解决的，所以，把完整的前后端代码都分享给大家，希望能够给大家带来帮助。 效果图
后端代码就是controller，即rest，这个相对简单，具体的代码如下： package controller; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.alibaba.fastjson.JSONObject; import api.IRptCheckTaskList; import api.RptCheckTaskList; import pojo.Course; @Controller public class TestController { @Autowired private IRptCheckTaskList iRptCheckTaskList; @RequestMapping("/showIndex") public String showIndex() { return "index"; } @RequestMapping(value = "/testUpdate") @ResponseBody public Map testUpdate(@RequestBody Map qureyMap){ System.out.println("执行时间" + qureyMap.get("daskDt") + "对账类型" + qureyMap.get("taskType")); Map resultMap = new HashMap(); resultMap.put("result", "success"); return resultMap; } } 前端代码首先是html代码 开始时间： 结束时间： 务加载日期 任务名称 任务类型 任务状态 任务执行结果 更新对账状态 function testJson() { //获取输入的值pname为id var psdate = $("#psdate").val(); //console.log(psdatedd,"000000000",typeof psdatedd); //var resultPsdate = dateTostring(psdatedd); var pedate = $("#pedate").val(); //var resultPedate = dateTostring(pedate); $.ajax({ //请求路径 url : "${pageContext.request.contextPath}/testJson", //请求类型 type : "POST", //data表示发送的数据 data : JSON.stringify({ psdate : psdate, pedate : pedate }), //定义发送请求的数据格式为JSON字符串 contentType : "application/json;charset=utf-8", //定义回调响应的数据格式为JSON字符串，该属性可以省略 dataType : "json", //成功响应的结果 success : function(data) { if (data != null) { /* alert("输入的用户名：" + data.pname + "，密码：" + data.password + "， 年龄：" + data.page); */ /* showData(data); */ showData(data); } else { alert("数据没有传过来"); } } }); } function testUpdate(paraDt, paraDp) { var taskDt = $(paraDt).text(); var taskDp = $(paraDp).text(); alert("接收的数据：接收对账的日期" + taskDt + "接收的对账类型为" + taskDp); console.log(taskDt, typeof taskDt); $.ajax({ //请求路径 url : "${pageContext.request.contextPath}/testUpdate", //请求类型 type : "POST", //data表示发送的数据 data : JSON.stringify({ daskDt : taskDt, taskType : taskDp }), contentType : "application/json;charset=utf-8", //定义回调响应的数据格式为JSON字符串，该属性可以省略 dataType : "json", //成功响应的结果 success : function(data) { if (data != null) { /* alert("输入的用户名：" + data.pname + "，密码：" + data.password + "， 年龄：" + data.page); */ /* showData(data); */ alert(data.result); } else { alert("数据没有传过来"); } } }); } function showData(data) { $("#tab tr:gt(0)").remove() var str = ""; for (var i = 0; i |
以上是最后的基本界面图，我的目标就是可以通过点击更新状态按钮，将列表中的任务加载日期和任务状态返回给后台，然后后台接收到数据后给前端返回success， 在执行过程中，单机更新状态按钮时候，可以弹出提示框，将获取列表中的任务加载日期和任务类型返回弹出来，效果图如下： 
再点击确认按钮，就会显示出后端返回的结果，具体的结果图如下所示： 
【本文地址】
今日新闻 |
推荐新闻 |