Ajax实例（JAVA）

最新推荐文章于 2025-10-13 09:35:33 发布
原创 最新推荐文章于 2025-10-13 09:35:33 发布 · 2.8w 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #ajax #import #servlet #数据库 #xmlhttprequest

该博客介绍了一个简单的Java Web应用，展示了如何使用Ajax进行留言板的留言提交和显示。主要内容包括一个展示留言的msbord.jsp页面，利用XMLHttpRequest进行数据提交的JavaScript，以及处理数据的Servlet和数据库操作。不过，此实例并未涵盖回复、编辑和删除等高级功能。

这是一个用于留言板留言提交与读取的简单实例，不包括回复、编辑与删除等其它管理功能。 本实例的目的在于用一个简单的例子展示如果在java web应用中，用javascript开发Ajax应用。

一、web页面 msbord.jsp

1、本页面用于留言显示

2、本页面提供留言功能，并利用httpxmlrequest提交给servlet保存数据并使用javascript对页面显示进行调整。

3、本例子没有对httpxmlrequest提交后的返回数据进行处理的实例展示。

 

<%@ page language="java" contentType="text/html; charset=gb18030"
    pageEncoding="gb18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ page import="java.sql.*" %>
<jsp:useBean id="DataSql" scope="page" class="edu.scnu.cn.common.DataSql"></jsp:useBean>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030">
<title>留言薄</title>
<style>
    body{font-size:12px;text-align:center;}
    dl  {margin:0;}
    dt  {background-color:#666;color:#fff;margin:1px;padding:0 3px;}
    dd  {margin:3px;}
    div {margin:auto;line-height:150%;text-align:left;width:400px;border:1px solid #666;}
    #msgInput {margin-top:10px;}
    dd.button {text-align:center;}
    dd.button.input{margin:0 20px;}
</style>
<script type="text/javascript">
function addToList(){
    var msgList=document.getElementById("msgBox");
    var dl=document.createElement("dl");    
    var dt=document.createElement("dt");
    var dd=document.createElement("dd");
    var dd2=document.createElement("dd");
    var dd3=document.createElement("dd");
    msgList.insertBefore(dl,msgList.firstChild);
    dl.appendChild(dt);
    dl.appendChild(dd);
    dl.appendChild(dd2);
    dl.appendChild(dd3);
    dt.innerHTML="主　　题："+subject.value;
    dd.innerHTML="留 言 人："+author.value;
    dd2.innerHTML="内　　容："+content.value;
    dd3.innerHTML="时　　间："+time.value;
    subject.value="";
    author.value="";
    content.value="";
    time.value="";    
}
function createXMLHttp(){
    var xmlhttp;    
    try{
        xmlhttp=new XMLHttpRequest();
    }catch(e){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}
function delRecord(id){

}
function ajaxSubmit(){
    var xmlhttp=createXMLHttp();
    xmlhttp.onreadystatechange=function(){
        if(4==xmlhttp.readyState){
            if(200==xmlhttp.status){
                //alert(xmlhttp.responseXML);
                addToList();
            }else{
                alert("no");
            }
        }
    }
    var sql="insert into msgbox values(null,'"+subject.value+"','"+author.value+"','"+content.value+"','"+time.value+"')";
    var submitUrl="/servlet/AddRecordServlet?sql="+sql;
    xmlhttp.open("post",submitUrl,true);    
    xmlhttp.setRequestHeader('Conten-type','application/x-www-form-urlencode');
    xmlhttp.send(null);
    return false;    
}
</script>
</head>
<body>
<%  
    Connection conn=DataSql.getConn();  
    String sql="select * from msgbox order by time DESC";  
    ResultSet rs=DataSql.getRs(conn,sql);  
    while(rs.next()){  
%>
    <div id="msgBox">  
        <dl id="dl+<%=rs.getString("id") %>">
            <dt>主　　题：<%=rs.getString("subject") %></dt>
            <dd>留 言 人：<%=rs.getString("author") %></dd>
            <dd>内　　容：<%=rs.getString("content") %></dd>
            <dd>时　　间：<%=rs.getString("time") %></dd>
        </dl>
    </div>
    
<%
    }
%>
    <div id="msgInput">
    <form name="msgForm"  method="POST">
        <dl>
            <dt>主　　题：<input type="text" name="subject" size="42" id="subject"></dt>
            <dd>留 言 人：<input type="text" name="author" size="42"　id="author"></dd>
            <dd>内　　容：<textarea rows="10" cols="42" name="content" id="content"></textarea></dd>
            <dd>时　　间：<input type="text" size="42" name="time" id="time"></dd>
            <dd class="button"><input type="button" onClick="ajaxSubmit()" value="提交" >
                <input type="Submit"  value="提交2" >
            </dd>
        </dl>
    </form>
    </div>
<script>
    var subject=document.forms[0].subject;
    var author=document.forms[0].author;
    var content=document.forms[0].content;
    var time=document.forms[0].time;
</script>
</body>
</html>

 

二、servlet

用于对页面提交数据的处理。

 

package edu.scnu.cn.common.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;
import edu.scnu.cn.common.DataSql;
import java.sql.*;

public class AddRecordServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    /**
     * Constructor of the object.
     */
    public AddRecordServlet() {
        super();
    }

    /**
     * Destruction of the servlet. <br>
     */
    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    /**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out
                .println("<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">");
        out.println("<HTML>");
        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
        out.println("  <BODY>");
        out.print("    This is ");
        out.print(this.getClass());
        out.println(", using the GET method");
        out.println("  </BODY>");
        out.println("</HTML>");
        out.flush();
        out.close();
    }

    /**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        DataSql dataSql=new DataSql();
        try {
            Connection conn=dataSql.getConn();
            String sql=request.getParameter("sql");            
            try {
                int i=dataSql.execute(conn,sql);
                conn.close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } 
        } catch (InstantiationException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
    }

    /**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occurs
     */
    public void init() throws ServletException {
        // Put your code here
    }

}

 

三、web.xml

对serverlet进行配置

 

  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>AddRecordServlet</servlet-name>
    <servlet-class>edu.scnu.cn.common.servlet.AddRecordServlet</servlet-class>
  </servlet>

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

 

四、DataSql

数据库操作类

 

package edu.scnu.cn.common;
import java.sql.*;
/**
 * 
 * @author li
 *
 *数据库操作类
 */
public class DataSql {
    /**
     * 
     * @return
     * @throws InstantiationException
     * @throws IllegalAccessException
     * @throws ClassNotFoundException
     * 
     * 直接连接到数据库，数据库指定为crjy
     */
    
    public  Connection getConn() throws InstantiationException, IllegalAccessException, ClassNotFoundException
    {
        //数据库用户名
        String userName="root";
        //密码
        String userPasswd="admin222";
        //数据库名
        String dbName="crjy";        
        //联结字符串
        String url="jdbc:mysql://localhost:3306/"+dbName+"?useUnicode=true&characterEncoding=GB2312&user="+userName+"&password="+userPasswd;
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        Connection conn=null;    
        try
        {
            conn = DriverManager.getConnection(url);
        }
        catch (SQLException e)
        {
            e.printStackTrace();
        }    
        return conn;        
    }
    
    /**
     * 
     * @param conn        到数据库的连接
     * @param sql        sql串
     * @return
     * 
     * 得到数据集
     * 
     */
    public ResultSet getRs(Connection conn,String sql) 
    {
        Statement statement=null;
        ResultSet rs=null;
        try {
            statement = conn.createStatement();
            rs = statement.executeQuery(sql);
        } catch (SQLException e) {
            // TODO 自动生成 catch 块
            e.printStackTrace();
        }
    
        return rs;        
    }
    
    /**
     * 
     * @param conn        到数据库的连接   
     * @param sql        sql串
     * @return
     * 
     * 执行删除，更新等操作
     */
    public int execute(Connection conn,String sql) 
    {
        Statement statement=null;
        int i=0;
        try {
            statement = conn.createStatement();
            i= statement.executeUpdate(sql);
        } catch (SQLException e) {
            // TODO 自动生成 catch 块
            e.printStackTrace();
        }
    
        return i;        
    }


}
Java端 ajax简单入门例子
03-10
这只是一个就简单的Ajax实时与后台数据查询对比的注册模块，尚未完善，但是体现在能够前台数据与数据库实时对比。
基于java的AJAX例子
06-05
基于java的AJAX例子,好几个例子,亲自测验,绝对管用,一起学习,共同进步!
Ajax应用开发典型实例实战详解
最新发布
weixin_34268462的博客
10-13 752
在发送请求前，可通过方法添加自定义HTTP请求头，这对身份验证、内容协商、CSRF防护等场景至关重要。
java+ajax+json+jquery完整实例
01-09
实现了java+ajax+json+jquery的完整实例，包括ajax+jquery向后台传参，后台传输json数据到前台ajax接收。里面有自己遇到的四个问题，及解决的具体办法。
java(ajax)实例
yizhidawoniu的博客
05-03 391
package com.renjie.Servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletReques...
Java：Ajax案例
tsfx051435adsl的博客
12-13 735
前言在javaweb中，ajax是前后台交互的技术，可以实现异步请求，不用刷新整个页面就可以完成操作。案例1：用ajax实现登录1、在myeclipce中创建web项目，目录结构如下，该建包建包，该建类建类，该建jsp建jsp，该导入jquery导入jquery。 **2、实现的功能是：在index.jsp 中用户输入id和username，点击登录，传到后台，如果id为110，usernam
Java+ajax写的登录实例
06-06
在这个“Java+ajax写的登录实例”中，我们将探讨如何结合这两种技术来实现一个实时验证的用户登录系统。 首先，Java作为后端开发的主要语言，负责处理业务逻辑和数据操作。在这个登录实例中，Java会实现以下功能： ...
ajax实例
01-08
在AJAX实例中，我们看到一个使用JavaScript库jQuery的示例。jQuery提供了简化AJAX操作的API，例如`$.ajax()`方法。这个方法允许我们配置各种参数来定制请求。以下是对`$.ajax()`方法中各个参数的详细解释： 1. `...
使用jquery 的ajax 与 Java servlet的交互代码实例
10-16
总结，这个实例展示了如何使用jQuery的AJAX与Java Servlet进行交互：前端通过AJAX发送数据，后端通过Servlet接收并处理数据，最后将处理结果返回给前端。这是一个基础的交互模型，实际应用中可能涉及更复杂的业务...
ajax调用java实例源码-jaxrsbars:jaxrsbars
06-04
ajax调用java实例源码带有 JAX-RS、MongoDB、JSON 和 jQuery 的现代 Web 应用程序 我们正处于范式转变之中，这将极大地改变我们构建和部署软件的人数。 90 年代后期，软件开始转向网络，网络浏览器的流行为用户提供...
java+ajax实例
weixin_34067102的博客
12-29 278
&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt
Java学习Ajax的小例子
08-11
在IE，Servlet的环境下实验Ajax的一个小例子，初学者可看。工具为Eclipse,Tomcat
java ajax 实例
11-27
-------- 目录说明 -------- database 目录存放数据库SQL文件 java 目录存放java源文件 webapp 目录存放实例页面及JSP源文件 ------------------ Java源文件使用说明 ------------------ 实例中大部分文件为HTML及JSP文件，部分Java源文件存放在java目录中。 可将目录中的内容作为Eclipse的一个项目导入Eclipse中使用。
Java Ajax 无刷新分页实例（完整版）
05-10
使用ajax 实现无刷新分页，指定页码跳转等……内置sql！适合练习参考……
一个完整的ajax应用例子
09-25
一个完整的用js写的ajax例子，模仿注册页面输入用户名，输入框失去焦点后，后台异步判断该用户名是否可用，并在页面显示判断结果
Ajax最简单实例(java)
热门推荐
Smileyan's blog
04-21 1万+
总体介绍，不感兴趣的请跳过：以下内容是关于DWR来实现Ajax的方法。 一、 Ajax的介绍。   AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX ...
java ajax简单实例_Java+JQuery Ajax 实例
weixin_31715353的博客
02-16 241
目录jsp：My JSP 'index.jsp' starting pagefunction sub(){$.ajax({type:"post", //请求方式url:"./test", //发送请求地址data:{ //发送给数据库的数据username:$("#username").val(),content:$("#content").val()},//请求成功后的回调函数有两个参数succ...
ajax java小实例_一个简单的ajax实例(转)
weixin_34873494的博客
03-02 323
首先，演示一下实际运行的效果。点击弹出新页面中的“See Author”链接，你将会看到该页面作者。从页面提交到显示从服务器获得的结果，这段过程你将不会发现页面的重刷新。下面给出该示例的代码：1. ajax.htmlA simple AJAX exampleA simple AJAX programThis page is powered by title="View the author."on...
java ajax_Ajax Java示例
weixin_29556943的博客
02-16 271
要创建ajax示例，需要使用服务器端语言，例如：Servlet，JSP，PHP，ASP.Net等。这里使用JSP来生成服务器端代码。在这个例子中，只是打印给定数字的表。使用jsp创建ajax示例的步骤需要按照以下步骤操作：加载org.json.jar文件。创建输入页面以接收文本或数字。创建服务器端页面以处理请求。在web.xml文件中提供条目。第1步：加载org.json.jar文件下载此示例，在...
掌握jQuery Ajax与Java实例的实用教程
### jQuery Ajax Java 实例分析 #### 知识点概览 1. **jQuery 简介**: jQuery 是一个快速、小巧、功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互的过程。 2. **Ajax 基础**: ...
评论 11
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值