当前位置：首页 > news >正文

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

news 来源：原创 2025/5/21 5:26:02

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

HTML
javascript
Flask
第一种方法：
第二种方法：

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title></head>
<body>
<div class="container"><div id="msg"></div><form><div><label for="username">UserName</label><input type="text" name="username" id="username"></div><div><label for="password">Password</label><input type="password" name="password" id="password"></div><div><label for="check_code">Check Code</label><input type="text" name="check_code" id="check_code"></div><div><button type="button" onclick="Submit()">Login</button><!-- button标签一定要加type属性，禁止表单自动提交机制   --></div></form>
</div>
</body>
</html>

javascript

<script>
<script src="../jquery-3.7.1.min.js"></script>
function Submit(){$.ajax({url: '/post_login',type: 'POST',contentType: 'application/json',dataType: 'json',data: $('form').serialize(),  // 发送的数据success: function(res) {if (res.code === 200){alert(res.msg)}else {console.log(res, '999999')$('#msg').text(res.msg)}},error: function(error) {console.error('Error:', error);}});}
</script>

Flask

from flask import Flask
from flask import render_template, redirect, request, jsonify
app = Flask(__name__)@app.route('/', methods=['GET'])
@app.route('/login', methods=['GET'])
def get_login():# 获取登录页面return render_template('Login.html')@app.route('/post_login', methods=['POST'])
def post_login():# 用户登录，提交表单return jsonify(dict(code=401, msg='success'))

第一种方法：

button按钮中，把属性type设置为type="button"，防止表单默认提交机制

<button type="button" onclick="Submit()">Login</button><!-- button标签一定要加type属性，禁止表单自动提交机制   -->

第二种方法：

JavaScript 事件监听器未正确处理
禁止自动提交机制

// 阻止默认的提交行为
$(document).on('click', 'button[type="submit"]', function(e) {e.preventDefault(); // 阻止默认的提交行为// 你的 AJAX 代码$.ajax({type: "POST",url: "/your-endpoint",data: { /* 数据 */ },success: function(response) {// 处理响应}});
});// 阻止表单的默认提交行为
$('form').on('submit', function(e) {e.preventDefault(); // 阻止表单的默认提交行为// 你的 AJAX 代码
});// 阻止事件进一步传播到其他事件处理器
$('button').on('click', function(e) {e.stopImmediatePropagation(); // 阻止事件进一步传播到其他事件处理器// 你的 AJAX 代码
});