qidao123.com技术社区-IT企服评测·应用市场

登录 立即注册
qidao123.com技术社区-IT企服评测·应用市场»论坛 › 软件与程序人生 › DevOps与敏捷开发 › ajax post请求 解决自动再get请求一次

ajax post请求 解决自动再get请求一次

[复制链接]
发表于 2025-5-25 16:30:23 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录</title>
  6.    
  7. </head>
  8. <body>
  9. <div class="container">
  10.     <div id="msg"></div>
  11.     <form>
  12.         <div>
  13.             <label for="username">UserName</label>
  14.             <input type="text" name="username" id="username">
  15.         </div>
  16.         <div>
  17.             <label for="password">Password</label>
  18.             <input type="password" name="password" id="password">
  19.         </div>
  20.         <div>
  21.             <label for="check_code">Check Code</label>
  22.             <input type="text" name="check_code" id="check_code">
  23.         </div>
  24.         <div>
  25.             <button type="button" onclick="Submit()">Login</button>
  26.             <!-- button标签一定要加type属性，禁止表单自动提交机制   -->
  27.         </div>
  28.     </form>
  29. </div>
  30. </body>
  31. </html>
复制代码
javascript

  1. <script>
  2. <script src="../jquery-3.7.1.min.js"></script>
  3. function Submit(){
  4.     $.ajax({
  5.         url: '/post_login',
  6.         type: 'POST',
  7.         contentType: 'application/json',
  8.         dataType: 'json',
  9.         data: $('form').serialize(),  // 发送的数据
  10.         success: function(res) {
  11.             if (res.code === 200){
  12.                 alert(res.msg)
  13.             }else {
  14.                 console.log(res, '999999')
  15.                 $('#msg').text(res.msg)
  16.             }
  17.         },
  18.         error: function(error) {
  20.             console.error('Error:', error);
  21.         }
  22.     });
  24. }
  25. </script>
复制代码
Flask

  1. from flask import Flask
  2. from flask import render_template, redirect, request, jsonify
  3. app = Flask(__name__)
  5. @app.route('/', methods=['GET'])
  6. @app.route('/login', methods=['GET'])
  7. def get_login():
  8.         # 获取登录页面
  9.     return render_template('Login.html')
  11. @app.route('/post_login', methods=['POST'])
  12. def post_login():
  13.         # 用户登录，提交表单
  14.     return jsonify(dict(code=401, msg='success'))
复制代码
第一种方法：

button按钮中，把属性type设置为type="button"，防止表单默认提交机制
  1. <button type="button" onclick="Submit()">Login</button>
  2. <!-- button标签一定要加type属性，禁止表单自动提交机制   -->
复制代码
第二种方法：

JavaScript 变乱监听器未正确处理
克制自动提交机制
  1. // 阻止默认的提交行为
  2. $(document).on('click', 'button[type="submit"]', function(e) {
  3.     e.preventDefault(); // 阻止默认的提交行为
  4.     // 你的 AJAX 代码
  5.     $.ajax({
  6.         type: "POST",
  7.         url: "/your-endpoint",
  8.         data: { /* 数据 */ },
  9.         success: function(response) {
  10.             // 处理响应
  11.         }
  12.     });
  13. });
  15. // 阻止表单的默认提交行为
  16. $('form').on('submit', function(e) {
  17.     e.preventDefault(); // 阻止表单的默认提交行为
  18.     // 你的 AJAX 代码
  19. });
  21. // 阻止事件进一步传播到其他事件处理器
  22. $('button').on('click', function(e) {
  23.     e.stopImmediatePropagation(); // 阻止事件进一步传播到其他事件处理器
  24.     // 你的 AJAX 代码
  25. });
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告
回复

使用道具 举报

返回列表

温锦文欧普厨电及净水器总代理
+ 我要发帖

© 2001-2025 Discuz! Team. Powered by Discuz! X3.5

GMT+8, 2025-7-10 02:54 , Processed in 0.233218 second(s), 33 queries 手机版|qidao123.com技术社区-IT企服评测▪应用市场 ( 浙ICP备20004199 )|网站地图

快速回复 返回顶部 返回列表