用ajax提交数据到后台,并且把计算结果从后台把数据转到前台(该过程不刷新页面)

这个例子可以比较基础。高手请跳过。本人刚学ajax,觉得好强大。

1:首先我们写一个jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	 
	<script type="text/javascript" src="scripts/jquery-1.4.4.js"></script>
	
	<script type="text/javascript">
	
	$(function(){
		$("#button1").click(function(){
			$.ajax({
				type: "GET",
				url: "Myservlet",
				dateType: "html",
				data:{'param1':$("#param1").val(), 'param2':$("#param2").val()},
				success: function(returnedData){
					$("#result").val(returnedData);
				}
				
			});
		});
	});
	
	</script>

  </head>
  
  <body>
   
   	<input type="text" id="param1">+
   	<input type="text" id="param2">=
   
	 <input type="text" id="result">
	 
	 <input type="button" value="get content from server" id="button1">

	
  </body>
</html>

页面运行的结果截图如下:

 

2:在web.xml(这里没有用struts,如果用了也可以在那里配置)中配置一个action。

<servlet>
    <servlet-name>Myservlet</servlet-name>
    <servlet-class>servlet.Myservlet</servlet-class>
  </servlet>
  <servlet>


  <servlet-mapping>
    <servlet-name>Myservlet</servlet-name>
    <url-pattern>/Myservlet</url-pattern>
  </servlet-mapping>
   

3:写一个servlet:

package servlet;


import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Myservlet extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		int param1=Integer.parseInt(req.getParameter("param1"));
		int param2=Integer.parseInt(req.getParameter("param2"));
		
		resp.setHeader("pragma", "no-cache");
		resp.setHeader("cache-control", "no-cache");

		PrintWriter out = resp.getWriter();
		
		//把该结果返回到ajax.jsp页面中的result文本框
		//out.println("helloworld");//用于测试
		out.println(String.valueOf(param1+param2));
		
		out.flush();
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req,resp);
	}
}

我们可以看到结果,但是前面2个值依然还在,这就是异步的强大之处,好多时候我们想获取数据,必须提交表单。刷新页面,但有时我们不想刷新页面,也想获取数据。就可以采用这种办法。如果我们在用百度搜索的时候,你写几个字,它马上就会出来提示,而且是最热门的搜索词汇。就是采用异步的方法得到的。下次也下个这样的帖子。




在Java Web开发中,前台通常使用JavaScript和Ajax技术与服务器进行异步交互。当用户在表单或其他界面元素上做出更改时,AJAX允许页面局部刷新,而无需完全重载整个网页。 前端(通常是HTML、CSS和JavaScript)编写一段AJAX请求,比如使用jQuery的$.ajax()函数或者更现代的fetch API。开发者设置HTTP请求(GET或POST),指定URL指向后端处理数据的服务端点,同时附带必要的数据。例如: ```javascript $.ajax({ url: 'your-backend-endpoint', // 后台API地址 type: 'POST', // 请求类型 data: JSON.stringify(yourData), // 将数据转化为JSON格式发送 contentType: 'application/json', success: function(response) { // 处理返回的JSON数据,如更新UI console.log(response); }, error: function(xhr, status, error) { // 处理错误 console.error(error); } }); ``` 后台,如Spring MVC、Express.js等,通过解析接收到的JSON数据,执行相应的业务逻辑,并生成一个新的JSON响应。在Spring MVC中,可以使用`@RequestBody`注解接收JSON请求体,在Node.js中则可能使用`body-parser`中间件。处理完后,服务端将结果包装成JSON格式返回给前端: ```java // Spring MVC示例 @PostMapping("/api/data") public @ResponseBody MyResponse handleData(@RequestBody MyRequest request) { // ... 业务逻辑处理 ... return new MyResponse(someProcessedData); } // Node.js Express示例 app.post('/api/data', (req, res) => { const data = req.body; // ... 数据处理 ... res.json({ key: value }); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值