欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用ajax插件实现异步提交

程序员文章站 2022-07-12 19:19:31
...

前言

​ 本人在做一个项目的时候遇到了一个需求:我需要向后台提交一个表单数据,在点击提交的时候只弹窗提示,但是不进行页面跳转。说道这里,很多前端大哥都会想到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进行处理,但不进行跳转;并且在点击添加的时候进行弹窗显示添加成功,给予用户选择是否跳转查看购物车的一个选择。这样就可以让用户能得到一个较为良好的用户体验。

上一篇: webpack

下一篇: webpack