ajax与java后台交互

Posted wust_ouyangli

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax与java后台交互相关的知识，希望对你有一定的参考价值。

创建的java web项目

前端页面

技术分享图片 
<%@ 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>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script>
       function TestAjax(){
           var xmlHttp;
           if (window.XMLHttpRequest) {
               xmlHttp = new XMLHttpRequest();
               
           } else {
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
           xmlHttp.onreadystatechange = function(){
               if (xmlHttp.readyState==4 && xmlHttp.status==200) {
                  document.getElementById("sp").innerHTML = xmlHttp.responseText; 
               }
           }
           
           xmlHttp.open("GET", "TestAjax?name=Ouyang", true);
           xmlHttp.send();
       }
    </script>
  </head>
  
  <body>
    <button onclick="TestAjax()">利用Ajax获取数据</button> <br>
    <span id = "sp"></span>
    
  </body>
</html>
View Code

后台程序(需配置web.xml，不赘述)

技术分享图片 
package com.ajax;

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

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.swing.RepaintManager;

/**
 * Servlet implementation class TestAjax
 */
@WebServlet("/TestAjax")
public class TestAjax extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public TestAjax() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        out.println("Hello " + request.getParameter("name"));
        out.flush();
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
View Code

 

以上是关于ajax与java后台交互的主要内容，如果未能解决你的问题，请参考以下文章

ajax交互方法实现

Spring Mvc模式下Jquery Ajax 与后台交互操作

java后台传递多个对象到ajax中，简单的放入，传递与遍历

Ajax使用jQuery与后台交互

Vue中使用Ajax与后台交互

利用ajax与后台交互容易出现的问题及解决办法