jQuery是一种快速、可扩展的JavaScript库,广泛应用于Web开发中的交互效果、动态加载、事件处理等方面。
JSP页面是Java Servlet技术的一种扩展,支持将HTML、CSS、JavaScript等前端代码嵌入到Java代码中。
在JSP页面中使用jQuery,可以实现快速、简便的DOM操作、事件绑定、Ajax等功能。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSP页面中使用jQuery</title> <script src="jquery-3.5.1.min.js"></script> <script type="text/javascript"> $(function(){ // 页面加载完成后执行此代码块 $("#btn").click(function(){ // 点击按钮执行此代码块 var name = $("#name").val(); var age = $("#age").val(); $.ajax({ url: "addUser.jsp", // 后端接口 data: {name: name, age: age}, type: "POST", dataType: "json", success: function(data){ if(data.code === 0){ alert("添加成功"); }else{ alert("添加失败:" + data.message); } }, error: function(xhr, status, error){ alert("请求失败:" + error); } }); }); }); </script> </head> <body> <h1>JSP页面中使用jQuery</h1> <form> <label>姓名:</label> <input type="text" id="name"/><br/> <label>年龄:</label> <input type="text" id="age"/><br/> <button type="button" id="btn">添加用户</button> </form> </body> </html>
上面的代码演示了一个简单的添加用户功能,通过Ajax向后端接口发送POST请求,实现数据的动态添加。
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did248351