ajax 与form 表单连用 success不执行bug解决

最新推荐文章于 2023-06-19 16:09:50 发布

kjshuan

最新推荐文章于 2023-06-19 16:09:50 发布

阅读量447

点赞数 1

分类专栏： JavaWeb 文章标签： Ajax

本文链接：https://blog.csdn.net/just_learing/article/details/124239274

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

ajax 与form 表单连用

经测试点击提交会共享数据传输

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书新增</title>
</head>
<body>
	<!-- <form action="index.jsp" method="post"> -->
	<div>
		图书名称：<input type="text" name="name" id="name"><span id="tname"
			style="color: red; font-size: 10px;"></span>
	</div>
	<div>
		图书作者：<input type="text" name="author" id="author"><span
			id="tauthor" style="color: red; font-size: 10px;"></span>
	</div>
	<div>
		购买日期：<input type="date" name="time" id="time"><span id="ttime"
			style="color: red; font-size: 10px;"></span>
	</div>
	<div>
		图书类别：<select name="type" id="type">
			<option value="0">请选择图书分类</option>
			<option value="1">计算机/软件</option>
			<option value="2">小说文摘</option>
			<option value="3">杂项</option>
		</select>
	</div>
	<button id="bt">提交</button>
	<!-- </form> -->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$("#bt").click(function() {
			var data = {
				"name" : $("input[name=name]").val(),
				"author" : $("input[name=author]").val(),
				"time" : $("input[name=time]").val(),
				"type" : $("#type").val(),
			}
			$.ajax({
				/* "async":false,  */
				"url" : "PanDinServlet", // 要提交的URL路径
				"type" : "get", // 发送请求的方式
				"data" : data, // 要发送到服务器的数据
				"dataType" : "text", // 指定传输的数据格式
				"success" : function(result) {
					alert(result)
					console.log(result)
					if (result == 1) {
						alert("图书名和作者不能为空");
						return;
					}
					if (result == 2) {
						alert("图书名和作者不能为空");
						return;
					}
					if (result == 3) {
						alert("日期格式错误");
						return;
					}
					if (result == 4) {
						alert("请选择图书分类");
						return;
					}
					if (result == 'true') {

						alert("添加图书成功");
						window.location.href = "index.jsp";
					}
				}

			});
		})
	</script>
</body>
</html>

如图所示

原因是form submit 或者button 与ajax 转发页面冲突

如果有表单提交超链接最后不要用ajax

注销调form表单即可 input 标签不受影响