如何通过SUBMIT按钮传递参数调用JQuery函数
2026-5-27
没问题，我来给你一步步拆解怎么实现这个需求——通过Submit按钮传递参数并调用jQuery函数，结合你提到的电影API场景，给你写个完整的可运行示例：
实现步骤
1. 先完善你的HTML表单
首先得给页面加一个带输入控件和Submit按钮的表单，比如让用户输入电影名称来传递搜索参数。把你的HTML调整成这样：
<!DOCTYPE html> <html> <head> <title>Movie Search Tool</title> <!-- 先引入jQuery库，不然没法使用它的函数 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <!-- 电影搜索表单 --> <form id="movieSearchForm"> <label for="movieTitle">输入电影名称:</label> <input type="text" id="movieTitle" name="movieTitle" placeholder="比如：Inception" required> <button type="submit">搜索电影</button> </form> <!-- 用来展示搜索结果的区域 --> <div id="searchResults" style="margin-top: 20px;"></div> <script> // 这里写jQuery逻辑代码 </script> </body> </html>
2. 用jQuery监听表单Submit事件
接下来在<script>标签里写核心逻辑：监听表单的提交事件，阻止默认的页面刷新行为，获取用户输入的参数，再调用自定义函数处理API请求：
$(document).ready(function() { // 监听表单的submit事件 $('#movieSearchForm').submit(function(e) { // 必须阻止表单默认提交行为，不然页面会直接刷新，没法用jQuery处理后续逻辑 e.preventDefault(); // 获取输入框里的参数值，trim()去掉前后空格 var movieTitle = $('#movieTitle').val().trim(); // 调用自定义的搜索函数，把参数传进去 searchMoviesWithAPI(movieTitle); }); // 定义处理电影搜索的函数 function searchMoviesWithAPI(title) { // 用你提供的TMDB API举例，注意替换成你自己的API密钥（如果需要的话） var apiKey = '1ca8226c006afb25adc4c816a2f8c184'; // 用encodeURIComponent处理参数，避免特殊字符导致的请求错误 var apiUrl = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${encodeURIComponent(title)}`; // 用jQuery的ajax方法发起API请求 $.ajax({ url: apiUrl, method: 'GET', success: function(response) { // 处理返回的结果，把内容渲染到页面上 var resultsHtml = ''; if (response.results.length > 0) { response.results.forEach(function(movie) { resultsHtml += ` <div style="border-bottom: 1px solid #eee; padding: 10px;"> <h3>${movie.title}</h3> <p>上映日期: ${movie.release_date || '未知'}</p> <p>评分: ${movie.vote_average || '暂无评分'}</p> </div> `; }); } else { resultsHtml = '<p>没有找到匹配的电影哦</p>'; } $('#searchResults').html(resultsHtml); }, error: function() { $('#searchResults').html('<p>搜索出错了，请稍后再试</p>'); } }); } });
关键细节说明
- 阻止默认提交：
e.preventDefault()是核心操作，不然表单会按照传统方式提交，直接刷新页面，我们的jQuery逻辑就跑不起来了。 - 参数获取：如果你的表单有多个字段，可以用
$(this).serialize()一次性获取所有表单参数，不用一个个单独取值。 - API适配：如果你想用OMDB API，只需要修改
searchMoviesWithAPI函数里的apiUrl即可：var apiUrl = `http://www.omdbapi.com/?apikey=bdd8feef&s=${encodeURIComponent(title)}`;
这样点击Submit按钮时，就会把用户输入的电影名称作为参数传递给jQuery函数，发起API请求后把结果展示在页面上啦。
内容的提问来源于stack exchange，提问作者Elbert Villarreal
