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

最新推荐文章于 2024-04-03 08:36:50 发布
最新推荐文章于 2024-04-03 08:36:50 发布
阅读量8.7k 收藏 14
点赞数 7
分类专栏： springMVC 软件开发 文章标签： java ajax js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28204711/article/details/113562560
版权

前言

这次写博客的原因就是自己在学习过程中，想通过点击按钮，然后给后台传递更新表的参数，当时我查阅很多网上的文章，遇到了很多问题，基本上他们给出的方案都是很简单的解答，但是我的是根据后端返回的数据，动态的生成前端列表，所以那种简单的设置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();的方式拿到了对应的值，这是整个过程核心部分，当时我在网上找了很多都没有相相关非常好的案例，这也是我做个案例的主要原因。希望能对大家有所帮助！

HandSome7758
关注
  • 7
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
python按钮调用函数_Python中Button组件的属性及参数
weixin_39646018的博客
11-24 3707
Python中Button按钮组件常用的属性及参数设置温馨提示，文章篇幅较长，请耐心阅本篇文章中小编给大家介绍Button按钮组件的相关常用的属性以及参数的设置。一. 常用属性使用语法变量=Button(父容器（根窗口），参数=参数值)二. 常用参数说明static:按钮状态选项，参数值为：DISABLED(禁用状态)、NORMAL（正常状态）、ACTIVE（活跃状态）from tkinter i...
js button onclick 传参_Vue.js备忘记录(二)
weixin_39774044的博客
11-22 811
一. 模板语法1. 文本<msg属性发生了改变，插值处的内容都会更新。如果只想更新一次: v-once<2. HTML双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用f="https://cn.vuejs.org/v2/api/#v-html">v-html指令例如：<!DOCTYPE html> 3.绑定标签属性Mustac...
onclick事件触发传多个参数，传中文参数
weixin_38331749的博客
06-01 2616
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、onclick事件，传多个参数二、onclick事件，参数是中文 前言 提示：开发中常用的场景，但容易忘记拼接格式，在此记录下来，方便以后查看。 一、onclick事件，传多个参数 var applyBtn = '<button οnclick="clickApplyPolicy(' + temp.id + ','+temp.pli_type+')">我要申办</button>' 二、onclic
『VUE』09. 事件传参（详细图文注释）
最新发布
MZH
04-03 1372
『VUE』09. 事件传参（详细图文注释）
JS 中 onclick 事件四种传参方式
稚枭天卓
11-02 4万+
1、在页面中给方法传参数，有如下的两种方法： 方法1，onclick=cancel(id，patientId); 在js文件中定义cancel方法 如果要把当前对象传过去用onclick="cancel(this,id,patientId)" js中cancel（obj，id，patientId） 方法2，在js中用 代码示例: jquery$(function(){ va
js自动点击button执行onclick操作
04-08 9187
<script type="text/javascript"> //一秒后模拟点击 setTimeout(function() { // IE if(document.all) { document.getElementById("parentIframe").click(); } // 其它浏览器 else { var e = document.c...
js中的onclick事件传参
OnlyYoushu的专栏
10-17 6358
js中的onclick事件传参   1、在页面中给方法传参数，有如下的两种方法： 方法1，onclick=cancel(id，patientId); 在js文件中定义cancel方法 如果要把当前对象传过去用onclick="cancel(this,id,patientId)" js中cancel（obj，id，patientId） 方法2，在js中用 复制代码代码示例
JavaScript笔记-点击button提交form表单
IT1995的博客
03-10 5509
功能如下： 点击购买后，点击确定。 确定调用了一个js函数，提交form表达给后端 代码如下： <div class="modal-footer"> <button type="button" class="btn text-white border bg-dark" data-bs-dismiss="modal">取消</button> <button type="button" class="btn text-white border bg
【JavaScript】按钮绑定点击事件-onCliek事件
热门推荐
【程序员不弃】的博客
03-19 9万+
【JavaScript】按钮绑定点击事件-onCliek事件 <button type="submit" id="btn">btn</button> 1. 第一种: $("#btn").click(function(event){} 2. 第二种: document.getElementById('#foo').addEventListener('cl...
VS ASP.NET中的button点击触发事件
09-26
在后台代码中，会创建一个与之关联的方法： ```csharp protected void Button1_Click(object sender, EventArgs e) { // 数据库操作示例 string strSQL = "select t.delinote from PDC_CUSTDELINOTE t where t....
给自定义Web控件添加事件(前后台代码)
10-27
接下来是后台代码部分，这部分定义了一个自定义事件`On_MyRegister`，它是一个委托类型`MyRegeitserDelegate`。在用户控件`myRegister`的实例中，这个事件可以在父页面或其他控制逻辑中订阅，以处理用户注册的相关...
.net后台弹出提示消息代码
09-11
在.NET开发中，有时我们需要在后台代码中向前端用户显示一些提示信息，比如确认操作、错误消息或成功通知。这通常通过注入JavaScript代码到HTML响应中实现，因为浏览器端的JavaScript可以直接与用户交互。以下是一些...
浅谈Web页面向后台提交数据的方式和选择
09-01
开发者可以在事件处理函数中创建Ajax请求，将数据作为请求参数发送到后台，返回的数据可以动态更新页面部分区域，提供更流畅的用户体验。这种方式适用于需要实时更新或者无需完整页面刷新的场景。 在实际的Web开发...
onsubmit阻止form表单提交与onclick的相关操作
09-05
需要注意的是，如果表单提交是通过一个普通按钮（`<input type="button">`）的`onclick`事件中调用`form.submit()`，那么`onsubmit`事件不会自动触发，需要手动调用。 示例： ```html ();"> function ...
JS onclick方法传超过2个以上参数的写法
suntao1995的博客
12-16 1256
单个参数传参写法 onclick='fanqianU("+ data[i].投产号 +")' 按照惯例，多个参数可以这么写，但是解析上有一定几率不被识别 onclick='fanqianU("+ data[i].投产号 +','+ data[i].内部编号 +")' 还可以这么写 onclick=\"Hui('"+ data[i].细则号 +"','"+ data[i].内部编号 +"')\...
button执行onclick函数_JavaScript函数详解
weixin_39989939的博客
11-24 2318
本文 目录：函数的 5 种声明return词法作用域执行上下文js的变量提升this arguments不同场景的this指向call apply bindcall stack闭包柯里化/高阶函数回调构造函数函数的 5 种声明1.具名函数function 2.匿名函数var 3.具名函数赋值var 4.window.Function 函数对象var 5.箭头函数var return每个函数都有 r...
thymeleaf使用th:onclick()赋值后台函数
createcloud的博客
02-14 1792
如图，这些按钮都是通过后台传递来的权限菜单生成的按钮。 <a th:each=“menu:KaTeX parse error: Expected 'EOF', got '#' at position 20: …rdMenu}" href="#̲" class="easyui…{menu.icon}” th:text="menu.name"th:onclick={menu.name}" th...
JS onclick 中如何传两个参数给 JS方法
每一件自己觉得值得的事都要不留余力的去做
07-10 4万+
直接传递2个参数。示例：1、定义一个js方法<script> function TestClick(a,b){//定义了2个参数a,b } </script>2、onclick传参<body> <button onclick='TestClick("1","2")'/>//调用TestClick函数，把1传给a，把2传给b </body>"<a href='javascript:void
第三种:通过js方法传递:用户点击这个button按钮,触发dom时间中的onclick事件,执行
07-15
### 回答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、付费专栏及课程。

余额充值