Ajax实现调用接口参数传递方法（页面不跳转）

原创

于 2020-10-10 18:03:38 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #调用接口 #页面不跳转

本文介绍了如何使用Ajax实现调用接口进行数据提交，使得页面不跳转。讲解了Ajax提交与普通form提交的区别，强调Ajax提交时form的action需为空，登录按钮需设置onclick事件。同时，重点讨论了Ajax中dataType和data参数的设置，以及如何通过serialize()方法或$.param()方法序列化参数。文章最后提到了原创声明和转载请注明出处的要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台普通form Action方式提交

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form id="loginform" action="login.do" method="post">
		用户名<input type="text" name="username" id="username" required autofocus />
		密 码 <input type="password" name="password" id="password" placeholder="password" required /> 
			  <input type="submit" value="登录">
	</form>
</body>
</html>

前台Ajax提交方法

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="e