使用ajax插件实现异步提交

前言

​ 本人在做一个项目的时候遇到了一个需求：我需要向后台提交一个表单数据，在点击提交的时候只弹窗提示，但是不进行页面跳转。说道这里，很多前端大哥都会想到ajax了。本文接下来将会叙述如何使用ajax插件实现这个需求，先把需要的两个js包附上链接：

链接：https://pan.baidu.com/s/1OdfBrtQiVxue_Nnf3bNZNA

提取码：34c1

关于AJAX

​ AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求，也可以叫做异步提交。

​ 关于什么是异步提交/异步网络请求，我们可以这样理解：我需要向后台（在这里可以理解为向Servlet提交表单）提交一些数据，但是我不想进行跳转。这时可能就有人说我可以使用HttpServlet中的Response进行重定向或者使用RequestDispatcher进行转发，这里有涉及到了重定向和转发的区别，这里我们不进行详谈，附上一个链接https://www.cnblogs.com/wrencai/p/9054664.html想进行详细了解的可以去自行阅读。

​ 当我们进行转发或者重定向的时候，这个页面已经是刷新过的页面这里已经不是我们提交数据前的页面。他是无法实现一些特殊场景下的业务需求的，就如前言本人提到的一个例子。

AJAX插件实现异步提交

<form id="formId" action="servlet" method="post" οnsubmit="return submit();">
    <button type="submit">提交</button>
</form>

	<script src="js/jquery.js"></script>
	<script src="js/jquery-form.js"></script>
	<script type="text/javascript">
		$("#formId").submit(function () {
	   	 	$('#formId').ajaxSubmit(function () {
	        
	    	})
        	//这里如果为true那么表单将会重复提交一次
	    	return false;
		})
	</script>

结语

​ ajax是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

​ 这在现实中的使用场景也颇多，例如本人最近的一门课程中需要做一个简单的网上购物商场，在我们把商品添加到购物车的时候，我们可以使用ajax把数据异步提交给servlet进行处理，但不进行跳转；并且在点击添加的时候进行弹窗显示添加成功，给予用户选择是否跳转查看购物车的一个选择。这样就可以让用户能得到一个较为良好的用户体验。