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

最新推荐文章于 2021-08-05 16:25:48 发布

lgx06

最新推荐文章于 2021-08-05 16:25:48 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：异步

本文链接：https://blog.youkuaiyun.com/lengguoxing/article/details/13607103

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

这个例子可以比较基础。高手请跳过。本人刚学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个值依然还在，这就是异步的强大之处，好多时候我们想获取数据，必须提交表单。刷新页面，但有时我们不想刷新页面，也想获取数据。就可以采用这种办法。如果我们在用百度搜索的时候，你写几个字，它马上就会出来提示，而且是最热门的搜索词汇。就是采用异步的方法得到的。下次也下个这样的帖子。