`
qmug
  • 浏览: 201534 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

从数据库中读取数据（AJAX版本）

    博客分类：
  • J2EE
AjaxJavaServletSQL ServerMySQL 
阅读更多
现在是用ajax 做从数据库读取数据的例子

1个jsp
Reg。jsp 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
	var xmlHttp;//不能用数字，标识符的定义
	
		function creatXML(){//建立异步请求的对象,为了jsp和servlet的交互,固定写法,名字固定

		if(window.ActiveXObject){
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}else if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}
	}
	//调用的主要的方法
	function a(){
		creatXML();
		xmlHttp.open("GET","http://127.0.0.1:9999/test730/servlet/zf");
		xmlHttp.onreadystatechange=call;
		xmlHttp.send(null);
	}
	//
	function call(){
		if(xmlHttp.readyState==4){//固定写法 4 代表完成 
			if(xmlHttp.status==200){//固定写法  200 代表 网页正常
				var b=xmlHttp.responseXML.getElementsByTagName("rr");//按照标签的名字对应的是servlet里面的out.println("<rr>"+b.getCity()+"</rr>");
				var c=document.getElementById("city");// <select name="city" id="city">里面的id="city"
				for(var i=0;i<b.length;i++){//把b里面的数组做循环
				
					var d=document.createElement("option");//option是固定的html标签
					d.innerText=b[i].firstChild.nodeValue;//把城市输出的结果显示出来
					d.setAttribute("value",b[i].firstChild.nodeValue);//输入value值
					c.appendChild(d);//把option里面的东西放入到select标签里面
					
				}
			}
		}
	}
	//测试用的方法
	function c(){
		alert("gag");
	}
</script>
<body onload="a()">
<form id="form1" name="form1" method="post" action="reg.do">
  用户名：
  <label>
  <input name="username" type="text" id="username" />
  </label>
  <p>电话：
    <label>
    <input name="tel" type="text" id="tel" />
    </label>
  </p>
  <p>城市：
    <label>
    <select name="city" id="city">
			  
    </select>
    </label>
  </p>
  <p>
    <label>
    <input type="submit" name="Submit" value="提交" />
    </label>
  </p>
</form>
<input type="button" value="gaoying" onclick="a()"/>

</body>
</html>


1个servlet 
package sl;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javabean.yonghu;

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

import db.DB;

public class zf extends HttpServlet {

	/**
	 * 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/xml");//设置返回的信息的类型
		PrintWriter out = response.getWriter();//为了显示输出。
		
		ArrayList a =new DB().yonghu();
		
		/**
		 * 做循环输出
		 */
		
		out.println("<citys>");
		for(int i=0;i<a.size();i++){
			yonghu b=(yonghu)a.get(i);
			out.println("<rr>"+b.getCity()+"</rr>");
		}
		out.println("</citys>");
		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 {

		
	}

}

DB包 
package db;

import java.sql.*;
import java.text.SimpleDateFormat;
import java.util.*;

import javabean.yonghu;


public class DB {
	private Connection conn;//用来连接数据库的“数据库连接对象”

	private PreparedStatement stmt;//数据库操作对象

	private ResultSet rs;

	public DB() {
		try {
			Class.forName("com.mysql.jdbc.Driver");
			conn = DriverManager.getConnection(
					"jdbc:mysql://localhost:3306/test728", "root", "1234");
					} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public boolean adduser(String username,String tel,String city) {
		try {

			stmt = conn
					.prepareStatement("insert into test728.user(username,tel,city) values(?,?,?)");
			//stmt.setInt(1, name);
			stmt.setString(1, username);
			stmt.setString(2, tel);
			stmt.setString(3, city);

			stmt.execute();

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return false;

	}

		 public ArrayList yonghu(){
			ArrayList a=new ArrayList();
			try {
				
				stmt=conn.prepareStatement("select distinct city from test728.user");
	
				
				rs=stmt.executeQuery();
				while(rs.next()){

					yonghu c=new yonghu();
					//c.setId(Integer.parseInt(rs.getString("id")));
					//c.setUsername(rs.getString("username"));
					//c.setTel("tel");
					c.setCity(rs.getString("city"));
					a.add(c);
					
				}
			
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			
			return a;
		}
}

1 个javabean 
package javabean;

public class yonghu {
	private int id;
	private String username;
	private String tel;
	private String city;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getCity() {
		return city;
	}
	public void setCity(String city) {
		this.city = city;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}

}

Web.xml 
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.4" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml</param-value>
    </init-param>
    <init-param>
      <param-name>debug</param-name>
      <param-value>3</param-value>
    </init-param>
    <init-param>
      <param-name>detail</param-name>
      <param-value>3</param-value>
    </init-param>
    <load-on-startup>0</load-on-startup>
  </servlet>
  <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>zf</servlet-name>
    <servlet-class>sl.zf</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>zf</servlet-name>
    <url-pattern>/servlet/zf</url-pattern>
  </servlet-mapping>
</web-app>


分享到：
| 从数据库中读取数据（直连版本）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ajax实现下拉列表从数据库读取数据级联

    本文将深入探讨如何使用Ajax实现下拉列表（Dropdown List）从数据库读取数据并实现级联效果。级联下拉列表通常用于关联数据的筛选，例如省份-城市-区县的选择，当用户在一级下拉列表中选择一个选项时，二级下拉列表...

    Ajax定时读取数据库（源代码发布）

    本示例是关于如何利用Ajax技术实现定时从数据库读取数据的源代码发布。以下将详细介绍这一技术的关键点。 ### 1. 基本原理 Ajax的核心是XMLHttpRequest对象，它是JavaScript的一个内置对象，可以创建与服务器的...

    Spring+Ajax+EcCharts，数据库数据读取到显示

    在本项目中，我们主要探讨如何使用Spring框架与Ajax技术结合，从数据库中获取数据，然后利用ECharts库将这些数据以条形图的形式展示出来。以下是对各个知识点的详细说明： 1. **Spring框架**：Spring是一个开源的...

    ajax_数据库中随机读取5条数据动态在页面中刷新

    在本文中，我们将深入探讨如何使用Ajax从数据库中随机读取5条数据并在网页上动态刷新。Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下更新部分网页的技术，它通过JavaScript与服务器...

    从数据库中读取的二级联动菜单(ajax)

    在本示例中，我们关注的是如何通过AJAX（异步JavaScript和XML）技术从数据库动态加载二级联动菜单的数据。这个场景通常出现在需要根据用户在一级菜单的选择动态加载二级菜单内容的情况，例如在地区选择、产品分类或...

    用JQuery,ajax从数据库读取数据.pdf

    在这个例子中，我们看到一个基于jQuery和Ajax的Web应用程序，用于从数据库中读取数据并显示在用户界面上。这个应用程序使用了LigerUI库，一个JavaScript组件集合，提供了诸如表格（ligerGrid）、对话框（ligerDialog...

    ajax实现自动读取数据

    本篇文章将深入探讨如何使用AJAX实现自动读取数据库数据，并根据用户需求进行定时读取。 首先，我们需要理解AJAX的基本原理。AJAX通过创建XMLHttpRequest对象，向服务器发送异步请求，获取数据，然后通过JavaScript...

    asp.net中使用ajax向数据库中插入数据

    ### ASP.NET中使用Ajax向数据库中插入数据 在ASP.NET应用程序开发过程中，使用Ajax技术能够实现页面局部刷新，提升用户体验。本文将详细讲解如何在ASP.NET应用中利用Ajax技术完成向数据库插入数据的操作。 #### 一...

    动态ajax从数据库取数据建立菜单

    在本场景中，我们讨论的是如何利用Ajax从数据库获取数据来动态构建菜单。这通常涉及到前端JavaScript、后端服务器处理以及数据库交互等多个层面。 首先，让我们了解Ajax的核心组成部分： 1. **XMLHttpRequest对象**...

    网页持续读取数据库数据显示

    【标题】"网页持续读取数据库数据显示"涉及的是在网页端实时或动态获取数据库中的数据，这通常通过AJAX（Asynchronous JavaScript and XML）技术实现。AJAX允许网页在不刷新整个页面的情况下与服务器交换数据并更新...

    jfinal+echarts实现饼图(数据库中读取数据)

    总结起来，这个项目展示了如何使用 JFinal 框架与 ECharts 结合，实现从数据库读取数据并以饼图形式展示。这种结合提供了灵活性和高效性，适用于各种数据可视化需求，帮助开发者更好地理解和呈现数据。通过学习和...

    用JQuery,ajax从数据库读取数据.docx

    6. **Ajax数据获取**: `url: "ValidateData.ashx"`指向的`ValidateData.ashx`是一个处理程序（可能是ASP.NET的HttpHandler），负责从数据库获取数据并返回。在实际应用中，这里通常会包含SQL查询或者ORM框架（如...

    下拉列表从数据库读取数据级联

    总的来说，通过结合HTML、JavaScript和服务器端脚本，我们可以实现下拉列表从数据库读取数据的级联效果。这个过程中，Ajax起到了关键作用，它允许我们在不刷新页面的情况下与服务器进行交互，提高了用户体验。记住，...

    Ajax定时读取数据库.rar

    【Ajax定时读取数据库】是一个ASP.NET WebForm应用程序，它利用Ajax技术来实现实时、无需刷新页面地从数据库获取新数据。这个案例对于初学者和中级程序员来说，是一个非常有价值的参考，因为它展示了如何在Web应用中...

    静态网页中通过ASP+AJAX读取数据库实例

    在这个"静态网页中通过ASP+AJAX读取数据库实例"中，我们将探讨如何将这两种技术结合，使静态网页能够实时、异步地获取并展示数据库中的数据，提升用户体验。 ASP是一种由微软开发的服务器端脚本环境，主要用于生成...

    读取电脑数据，存储到数据库中，并显示

    在IT领域，将电脑数据读取并存储到数据库中是一项常见的任务，这涉及到操作系统交互、数据处理、数据库管理和用户界面展示等多个技术环节。以下是对这个主题的详细解释： 首先，我们要理解“读取电脑数据”。这通常...

    ajax 弹出信息框（取数据库资源）及登陆

    服务器处理请求后，会返回数据，Ajax通过onreadystatechange事件监听状态变化，当状态变为4（表示请求完成）且status为200（表示请求成功）时，读取响应数据并进行后续处理。 ### 二、Ajax实现弹出信息框 在标题中...

    jQuery幸运中奖大转盘网页特效+ASP+jQuery+ajax读取数据库奖项数据

    5. ASP接收到请求后，从数据库读取奖项，返回给前端。 6. 前端接收到响应后，根据返回的奖项信息停止转盘动画，展示中奖结果。 这个资源包提供了一个完整的幸运转盘实现，对于想要快速搭建类似功能的网页工程师来说...

    Flash读取数据库中的数据

    本文将深入探讨Flash如何读取数据库中的数据。 首先，Flash与数据库之间的通信通常依赖于服务器作为中介。这是因为Flash本身并不直接支持连接到数据库，而是通过ActionScript（Flash的编程语言）调用服务器端的脚本...

Magicbox
Global site tag (gtag.js) - Google Analytics