js中button的onclick事件上送两个参数到后台,完整前后端代码示例

前言

这次写博客的原因就是自己在学习过程中,想通过点击按钮,然后给后台传递更新表的参数,当时我查阅很多网上的文章,遇到了很多问题,基本上他们给出的方案都是很简单的解答,但是我的是根据后端返回的数据,动态的生成前端列表,所以那种简单的设置ID的方法不适用,我也费很大力气才解决的,所以,把完整的前后端代码都分享给大家,希望能够给大家带来帮助。

效果图

在这里插入图片描述
以上是最后的基本界面图,我的目标就是可以通过点击更新状态按钮,将列表中的任务加载日期和任务状态返回给后台,然后后台接收到数据后给前端返回success,
在执行过程中,单机更新状态按钮时候,可以弹出提示框,将获取列表中的任务加载日期和任务类型返回弹出来,效果图如下:
在这里插入图片描述
再点击确认按钮,就会显示出后端返回的结果,具体的结果图如下所示:
在这里插入图片描述

后端代码

后端代码就是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<String,Object> testUpdate(@RequestBody Map<String, Object> qureyMap){
		System.out.println("执行时间" + qureyMap.get("daskDt") + "对账类型" + qureyMap.get("taskType"));
		Map<String, Object> resultMap = new HashMap<String, Object>();
		resultMap.put("result", "success");
		return resultMap;
		
	}
}

前端代码

首先是html代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javaScript"
	src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
</head>
<body>
	<form method="POST"
		action="${pageContext.request.contextPath}/testJson">
		<table>
			<tr>
				<td>开始时间:<input type="date" name="pssdate" id="psdate" /><br>
				</td>
				<td>结束时间:<input type="date" name="peedate" id="pedate" /><br>
				</td>
				<td><input type="button" value="查询" onclick="testJson()" /></td>
			</tr>
		</table>
	</form>
	<table id="tab" border=1 align='center' height="100%" width="100%">
		<tr>
			<th>务加载日期</th>
			<th>任务名称</th>
			<th>任务类型</th>
			<th>任务状态</th>
			<th>任务执行结果</th>
			<th>更新对账状态</th>
		</tr>
	</table>
</body>
<script type="text/javaScript">
	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 < data.result.length; i++) {
			if (data.result[i].taskState == "2") {
				var taskDt = data.result[i].taskDt;
				var str = "<tr><td align="+"'center' id ='dt"+i+"'"+">"
						+ data.result[i].taskDt
						+ "</td><td align="+"'center'"+">"
						+ data.result[i].taskName
						+ "</td><td align="+"'center'"+">"
						+ data.result[i].taskType
						+ "</td><td align="+"'center' id ='tp"+i+"'"+">"
						+ data.result[i].taskState
						+ "</td><td align="+"'center'"+">"
						+ data.result[i].errMsg
						+ "</td><td align="
						+ "'center'"+">"
						+ "<input type= 'button'  value= '更新状态' οnclick= 'testUpdate(dt"
						+ i + ",tp" + i + ")'/>" + "</td></tr>";
			} else {
				var str = "<tr><td align="+"'center'" +">"
						+ data.result[i].taskDt
						+ "</td><td align="+"'center'"+">"
						+ data.result[i].taskName
						+ "</td><td align="+"'center'"+">"
						+ data.result[i].taskType
						+ "</td><td align="+"'center'"+">"
						+ data.result[i].taskState
						+ "</td><td align="+"'center'"+">"
						+ data.result[i].errMsg + "</td>"
						+ "</td><td align="+"'center'>" + "不用更新" + "</td></tr>"
			}
			$("#tab").append(str);
		}
	}
</script>
</html>

我选择的是长传两个参数,showData(data)中显示的是实时获取数据表中的数据,也请求了具体的服务,因为本次主要是讲解获取button中的参数,所以这个请求不是主要的,在rest代码中就没有显示,大家如果想看可以单聊我,我会给大家分享出来。在
"可以看到testUpdate中传递的是tab的id,在testUpdate中,通过 $(paraDt).text();的方式拿到了对应的值,这是整个过程核心部分,当时我在网上找了很多都没有相相关非常好的案例,这也是我做个案例的主要原因。希望能对大家有所帮助!

  • 6
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 第三种方法是通过JavaScript方法传递。在HTML,我们可以创建一个button按钮,并给它添加一个onclick事件。 首先,在HTML创建一个button按钮元素: ```html <button onclick="myFunction()">点击我</button> ``` 然后,在JavaScript编写一个名为myFunction的函,该函将在用户通过点击按钮时执行: ```javascript function myFunction() { // 执行一些操作 console.log("按钮被点击了!"); } ``` 当用户点击按钮时,将触发DOM事件onclick事件,进而执行myFunction函。这个函可以执行一些你想要的操作。在上述示例,我在函添加了一行代码来在控制台记录按钮被点击了的信息。 这种方法通过在HTML直接设置onclick属性,可以方便地将事件与函绑定在一起。这样,当用户点击按钮时,就可以触发特定的函执行特定的操作。 总结起来,这种方法是通过设置onclick属性,并在JavaScript编写一个对应的函来实现用户点击按钮后执行一些操作。 ### 回答2: 通过js方法传递指的是在点击button按钮时触发onclick事件并执行相应的函。这种方法可以通过在button标签添加onclick属性来实现。 在HTML,我们可以为button按钮添加onclick属性,指定要执行的函。例如: <button onclick="myFunction()">点击我</button> 当用户点击这个button按钮时,会触发onclick事件,并执行名为myFunction()的函。 这里的myFunction()是一个自定义的JavaScript,可以在<script>标签定义。例如: <script> function myFunction() { console.log("按钮被点击了"); } </script> 在这个例子,当用户点击按钮时,控制台会输出"按钮被点击了"。实际应用,可以在myFunction()函编写需要执行的逻辑代码,例如更新页面内容、发送网络请求等。 需要注意的是,通过js方法传递是在客户端执行的,不会触发服务器端的响应。此方法适用于对页面元素进行交互操作,实现一些动态效果和功能。同时,为了代码的可读性和维护性,建议将JavaScript代码封装成独立的.js文件,并在HTML引入。 ### 回答3: 第三种方法是通过js方法传递来实现。当用户点击这个button按钮时,会触发DOM事件onclick事件,然后执行相应的操作。 具体实现的步骤如下: 1. 首先,在HTML文件创建一个button按钮,并给它设置一个onclick事件处理函,例如:onclick="myFunction()"。 2. 在JavaScript文件定义这个myFunction函,在函内实现需要执行的操作。 3. 在函内部可以使用DOM操作来修改页面的元素或执行其他需要的操作。 例如,我们可以在myFunction函内部使用DOM操作来修改一个div元素的内容,代码如下: ```javascript function myFunction() { // 获取需要修改的div元素 var divElement = document.getElementById("myDiv"); // 修改div元素的内容 divElement.innerHTML = "Hello, World!"; } ``` 在上述代码,我们首先通过document.getElementById方法获取了id为"myDiv"的div元素,并将它赋值给divElement变量。然后,通过修改divElement的innerHTML属性,将div元素的内容改为"Hello, World!"。 通过以上的步骤,当用户点击这个button按钮时,就会触发调用myFunction函,并执行其的操作,实现了通过js方法传递的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值