前端form表单中提交时二次刷新问题

问题描述:在页面中的<form>里面添加button按钮,点击按钮触发事件后,js、jquery里面添加相应点击事件方法,方法里面控制页面跳转,触发事件后,页面会刷新两次,最后回到原来页面。

原因:如果form标签里面没有添加action属性,默认路径为当前页,使用js、jquery中的方法执行后,会再执行form标签里面的action地址(也就是当前页刷新)

<form action="/login" method="post"><input type="text" name="username"/><input type="password" name="password"/><input type="submit" value="提交"/>
</form>
$("form").submit(function (e) {e.preventDefault();var name = $("#username").val();var psss = $("#password").val();var jf = {username: name, password: psss};$.ajax({url: "/login",contentType: "application/json;chart=utf-8",data: JSON.stringify(jf),dataType: "json",type: 'post',success: function (res) {if (res.code == '200') {setTimeout(function () {window.location = "/main"}, 1000);} else {console.log("登录失败!");}}})
});
    @RequestMapping(value = "/login",method = RequestMethod.POST)public String login(@RequestBody JSONObject json){System.out.println(json);return "main";}

解决方法:e.preventDefault();
可以使用preventDefault()方法来阻止表单的默认提交行为。
ajax请求如果提交表单,但是后台接受不到数据,这时候form表单序列化,可解决此问题:

data : $(this).serialize();
接上面js脚本中ajax请求的data属性设置;
遇到的问题:如果遇到请求到后台且没发生异常情况,后台正常返回响应,但是没有在ajax的success方法里出现,而是进入error方法里面,此时可以修改掉dataType:"text"的数据类型就可以,当然也可能有其他地方出现错误;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/756035.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UE4_AI_行为树_行为树快速入门指南

声明&#xff1a;学习笔记。 在 行为树快速入门指南 中&#xff0c;你将学会如何创建一个敌方AI&#xff0c;该AI看到玩家后会做出反应并展开追逐。当玩家离开视线后&#xff0c;AI将在几秒钟后&#xff08;这可根据你的需求进行调整&#xff09;放弃追逐&#xff0c;并在场景中…

使用 Postman 批量发送请求的最佳实践

背景 最近写了几个接口&#xff1a; 获取 books 的接口获取 likes 的接口获取 collections 的接口 但是我还是不放心&#xff0c;因为这些接口到底稳不稳定呢&#xff1f;上线后有没有隐患呢&#xff1f;所以我想做一个批量发送接口模拟~ 但是想要做到批量发送接口&#xf…

考研数学|《基础660》太难了!哪本习题集更适合打基础?

对于基础阶段的学习者来说&#xff0c;推荐使用汤家凤老师的《1800题》。这本题集包含了大量的数学题目&#xff0c;覆盖了考研数学的各个知识点和难度层次。题目设计全面&#xff0c;有助于系统地复习和巩固数学知识。 《1800题》提供了详细的解题思路和答案解析&#xff0c;…

XSS攻击及防御方式

XSS攻击 XSS&#xff08;Cross Site Scripting&#xff0c;跨站脚本攻击&#xff09;&#xff0c;是指攻击者利用站点的漏洞&#xff0c;在表单提交时&#xff0c;在表单内容中加入一些恶意脚本&#xff0c;当其他正常用户浏览页面&#xff0c;而页面中刚好出现攻击者的恶意脚…

高职(大专)教师结构化面试之复习攻略

一般高校自己组织的面试&#xff0c;结构化分为以下几部分&#xff1a; 1.岗位认知&#xff08;必背&#xff09; 2.职教热点&#xff08;很重要&#xff09; 3.教育教学&#xff08;包括教育教学理论、教育热点、教学相关问题解决&#xff09; 4.人际关系&#xff08;与领…

oops-framework框架 之 启动流程(三)

引擎&#xff1a; CocosCreator 3.8.0 环境&#xff1a; Mac Gitee: oops-game-kit 回顾 上篇博客中我们通过 oops-game-kit 模版构建了基础的项目&#xff0c;另外讲解了下assets目录结构和游戏配置文件的基本使用相关&#xff0c;详情内容可参考&#xff1a; oops-framewo…

Anaconda创建虚拟环境并使用Jupyter notebook应用虚拟环境

①创建Anaconda虚拟环境 一、管理员身份运行Anaconda Prompt 二、输入命令conda create --name your_env_name pythonx.x&#xff0c;your_env_name为自己环境明没&#xff0c;要对应自己的python版本&#xff0c;可以在命令行中输入python就可以进入python运行环境查看版本。…

DevOps工作流程之一:Apipost

随着互联网行业的不断发展&#xff0c;为了提高工作效率&#xff0c;加快软件的交付流程&#xff0c;越来越多企业的选择DevOps工作流程。DevOps旨在通过自动化流程和改善协作&#xff0c;实现软件开发、测试和交付的一体化&#xff0c;从而提高软件交付的质量和速度。而Apipos…

【蓝桥杯练习系统】基础练习(Java)(普通试题数+VIP试题数)

“蓝桥杯”练习系统 (lanqiao.cn) 基础入门 BASIC-01 AB问题 入门 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int A scanner.nextInt();int B scanner.nextInt();System.out.print…

测试面试必备:HTTP请求和响应详解!

一次完整的HTTP请求过程从TCP三次握手建立连接成功后开始&#xff0c;客户端按照指定的格式开始向服务端发送HTTP请求&#xff0c;服务端接收请求后&#xff0c;解析HTTP请求&#xff0c;处理完业务逻辑&#xff0c;最后返回一个HTTP的响应给客户端&#xff0c;HTTP的响应内容同…

wireshark 使用实践

1、打开wireshark软件&#xff0c;选择网卡&#xff0c;开始抓包 2、打开浏览器&#xff0c;访问一个http网站&#xff1a;这里我用 【邵武市博物馆】明弘治十一年&#xff08;1498&#xff09;铜钟_文物资源_福建省文 测试&#xff0c;因为它是http的不是https&#xff0c;方…

【OpenWRT】x86平台安装原版OpenWRT

在当今高度互联的数字化时代&#xff0c;网络设备已经成为我们日常生活和工作中不可或缺的一部分。为了满足不同用户对网络功能的个性化需求&#xff0c;开源社区涌现出了诸多优秀的项目&#xff0c;其中 OpenWrt 便是其中之一。 OpenWrt 是一款专注于为嵌入式设备提供定制化、…

Echarts自适应大小和字体的大屏可视化方案

痛点&#xff1a; 用 Echarts 写图表&#xff0c;屏幕大小改变时&#xff0c;字体不能同步缩放&#xff0c;图表不会自动适应容器 有这个困扰的同学请给颗 star https://github.com/wj100/auto-size-echart 此方案代码量少&#xff0c;使用简单&#xff0c;接管 echarts 配置…

搜维尔科技:矿山安全多人协同仿真演练系统!

搜维尔科技&#xff1a;矿山安全多人协同仿真演练系统&#xff01; 搜维尔科技&#xff1a;矿山安全多人协同仿真演练系统&#xff01;

小型路由器,为什么四个端口的IP在一个网段?

是的&#xff0c;路由器确实在不同网段&#xff0c;不过小型路由器&#xff08;宽带路由器&#xff09;一般都是为家用设计的&#xff0c;思路就是越简单好用越好&#xff0c;逻辑上其实它只有一个WAN口和一个LAN口&#xff0c;WAN口接公网一个地址&#xff0c;LAN口接你电脑一…

手写 UE4中的 TArray

#pragma once #include<iostream> #include<stdexcept> #define CHECK_INDEX_RANGE(Index) if (Index > ElementCount) throw std::out_of_range("索引超出界限")template<typename ElementType> class TArray {typedef unsigned int uint; pri…

【Leetcode-102.二叉树的层序遍历】

题目详情&#xff1a; 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]]示例…

GPT实战系列-智谱GLM-4的模型调用

GPT实战系列-智谱GLM-4的模型调用 GPT专栏文章&#xff1a; GPT实战系列-实战Qwen通义千问在Cuda 1224G部署方案_通义千问 ptuning-CSDN博客 GPT实战系列-ChatGLM3本地部署CUDA111080Ti显卡24G实战方案 GPT实战系列-Baichuan2本地化部署实战方案 GPT实战系列-让CodeGeeX2帮…

linux下常见服务的搭建搜集 —— 筑梦之路

安装JDK 官网下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads# 创建目录 mkdir /usr/local/java/# 解压 tar -zxvf jdk-8u333-linux-x64.tar.gz -C /usr/local/java/# 配置环境变量 vim /etc/profileexport export JAVA_HOME/usr/local/java/jdk1.8.…

【Java刷题篇】滑动窗口

文章目录 &#x1f4c3;滑动窗口&#x1f4dc;基本概念&#x1f4dc;核心思路 ✍最大连续1的个数 III✍水果成篮 &#x1f4c3;滑动窗口 &#x1f4dc;基本概念 滑动窗口是一种基于双指针的一种思想&#xff0c;两个指针指向的元素之间形成一个窗口。 分类&#xff1a;窗口有…