web前端数据交互技术

最新推荐文章于 2023-07-20 09:22:51 发布

长弓晗炅

最新推荐文章于 2023-07-20 09:22:51 发布

阅读量392

点赞数

分类专栏： JavaScript 文章标签： javascript jquery java

本文链接：https://blog.csdn.net/zd_bcrs/article/details/107394880

版权

本文介绍了六种Web前端与后端数据交互的方法：请求转发、重定向、AJAX技术、JavaScript简单交互、模态窗体以及jQuery中的AJAX。请求转发和重定向适用于简单的数据传递和页面跳转，AJAX则实现了页面局部刷新，提高交互效率。jQuery的AJAX方法如load、post提供了更便捷的异步交互方式。

摘要由CSDN通过智能技术生成

1、请求转发
请求转发技术能够传递的数据类型不仅仅局限于String类型，它能够转发Object对象，因此来说引用的范围是比较广泛的。一般来说，这种方法应用在jsp页面中的form表单请求的方式，在后台接受的时候采用的是request.getParameter("name")，接收到的是一个Object对象，而后进行处理。

protected void doPost(HttpServletRequest req,HttpServletResponse res) {
   
		System.out.println("这里是post方法。。。");
		Object name1 = req.getParameter("username");
		Object pwd = req.getParameter("password");
		String name = name1.toString();
		String password = pwd.toString();
		System.out.println(name + '\n' + password);
		
		Map<String,String> map = new HashMap<String,String>();
		map.put("name", "张三");
		
		try {
   
			req.setAttribute("num", map);
			req.getRequestDispatcher("example.jsp").forward(req, res);
		} catch (Exception e) {
   
			// TODO Auto-generated catch block
			e.printStackTrace();
		} 
	}

这里前端采用的是form表单的请求方式：

<body>
	<form action="doajax" method="post" enctype="application/x-www-form-urlencoded">
		用户名：<input type="text" name="username"/><br />
		密    码：<input type="password" name="password" /><br />
		<input type="reset" value="重置"/>
		<input type="submit" value="提交"/>
	</form>
	<div>
		这是一个简单的页面。。。
	</div>
</body>

在进行数据回传的时候，需要进行设置:

request.setAtttribute("key","value");
request.getRequestDispatcher("目标页面").forward(request,response);

在jsp页面接收数据的时候需要配配合Java代码一起使用：

<%
	Object obj = request.getAttribute("num");
	Map<String,String> map = (Map)obj;
	String name = map.get("name");
%>

<body>
	<form action="doajax" method="post" enctype="application/x-www-form-urlencoded">
		用户名：<input type="text" name="username"/><br />
		密    码：<input type="password" name="password" /><br />
		<input type="reset" value="重置"/>
		<input type="submit" value="提交"/>
	</form>
	<div>
		这是一个简单的页面。。。
	</div>
	alert("这是回传回来的信息：" + <%=name %>);
</body>

这就是请求转发的数据交互方式，主要用在后台,向前端进行数据交互的，前端通过from表单的形式向后端发起数据交互的请求。
2、重定向：
这种技术比较简单，只能够传输String类型的数据在进行简单的数据交互的时候或者只进行页面跳转的时候建议使用。这种方式的交互，前端也一般是通过form表单请求的方式向后端发起，后端给前端传输数据的时候会用到。
这里是前端的请求发起页面，采用的是get的方式：

<body>
	<form action="doajax" method="get" enctype="application/x-www-form-urlencoded">
		用户名：<input type="text" name="username"/><br />
		密    码：<input type="password" name="password" /><br /&

最低0.47元/天解锁文章

长弓晗炅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端数据交互技术

1、请求转发请求转发技术能够传递的数据类型不仅仅局限于String类型，它能够转发Object对象，因此来说引用的范围是比较广泛的。一般来说，这种方法应用在jsp页面中的form表单请求的方式，在后台接受的时候采用的是request.getParameter("name")，接收到的是一个Object对象，而后进行处理。protected void doPost(HttpServletRequest req,HttpServletResponse res) { System.out.println(
复制链接

扫一扫

专栏目录