ajax读取mysql的数据库_从数据库中读取数据(AJAX版本)

本文演示了如何使用Ajax进行异步请求,从MySQL数据库中读取城市数据,并将其动态加载到网页的下拉列表中。通过创建XMLHttpRequest对象,发送GET请求到Servlet,Servlet查询数据库并返回响应。
摘要由CSDN通过智能技术生成
无标题文档

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(""+b.getCity()+"");

var c=document.getElementById("city");// 里面的id="city"

for(var i=0;i

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");

}

用户名:

电话:

城市:

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.

*

* 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("");

for(int i=0;i

yonghu b=(yonghu)a.get(i);

out.println(""+b.getCity()+"");

}

out.println("");

out.flush();//把流中的东西刷出去

out.close();//关闭

}

/**

* The doPost method of the servlet.

*

* 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

action

org.apache.struts.action.ActionServlet

config

/WEB-INF/struts-config.xml

debug

3

detail

3

0

This is the description of my J2EE component

This is the display name of my J2EE component

zf

sl.zf

action

*.do

zf

/servlet/zf

下载次数: 193

分享到:

18e900b8666ce6f233d25ec02f95ee59.png

72dd548719f0ace4d5f9bca64e1d7715.png

2008-07-30 21:33

浏览 3509

评论

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值