使用ajax实现对数据库中数据的查询

最新推荐文章于 2023-01-23 18:14:47 发布
原创 最新推荐文章于 2023-01-23 18:14:47 发布 · 3.4k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #mysql #intellij-idea #tomcat #javascript

本文详细介绍了如何使用Ajax根据省份ID从数据库中查询省份名称。首先阐述了需求，然后通过IntelliJ IDEA搭建环境，利用JDBC进行数据库连接。接着展示了在index.jsp和web.jsp中如何设置页面，以及 ProvinceDao 类和 QueryProvinceServlet 类的实现。进一步，文章讲解了如何使用JSON格式的数据，引入相关jar包，并创建Province实体类，最后在QueryJsonServlet中处理请求，完成JSON响应。

一、ajax根据省份id查询省份名称

1. 需求

  • 用户在文本框架输入省份的编号id，在其他文本框显示省份名称
  • 项目环境准备
    • 数据库：javaweb
    • 据库表：

省份信息表pro

SET FOREIGN_KEY_CHECKS=0 ;
DROP TABLE IF EXISTS `pro`;
CREATE TABLE `pro`(
  `id`int(11) NOT NULL AUTO_INCREMENT ,
  `name`varchar(255) DEFAULT NULL COMMENT '省份名称',
  `jiancheng`varchar(255) DEFAULT NULL COMMENT '简称',
  `shenghui` varchar(255) DEFAULT NULL,
PRIMARY KEY(`id`)
)ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8 ;


INSERT INTO `pro` VALUES ('1','河北','冀','石家庄');
INSERT INTO `pro` VALUES ('2','山西','晋','太原市');
INSERT INTO `pro` VALUES ('3','内蒙古','蒙','呼和浩特市');
INSERT INTO `pro` VALUES ('4','辽宁','辽','沈阳');
INSERT INTO `pro` VALUES ('5','江苏','苏','南京');
INSERT INTO `pro` VALUES ('6','浙江','浙','杭州');
INSERT INTO `pro` VALUES ('7','安徽','皖','合肥');
INSERT INTO `pro` VALUES ('8','福建','闽','福州');
INSERT INTO `pro` VALUES ('9','江西','赣','南昌');

城市信息表city

SET FOREIGN_KEY_CHECKS=0 ;
DROP TABLE IF EXISTS `city`;
CREATE TABLE `city` (
`id` int (11) NOT NULL AUTO_INCREMENT ,
`name` varchar (255) DEFAULT NULL,
`provinceid` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT= 17 DEFAULT CHARSET=utf8 ;

INSERT INTO `city` VALUES ('1','石家庄','1') ;
INSERT INTO `city` VALUES ('2','秦皇岛','1') ;
INSERT INTO `city` VALUES ('3','保定市','1') ;
INSERT INTO `city` VALUES ('4','张家口','1') ;
INSERT INTO `city` VALUES ('5','南昌市','9') ;
INSERT INTO `city` VALUES ('6','九江市','9') ;
INSERT INTO `city` VALUES ('7','宜春市','9') ;
INSERT INTO `city` VALUES ('8','福州市','8') ;
INSERT INTO `city` VALUES ('9','厦门市','8') ;
INSERT INTO `city` VALUES ('10','泉州市','8') ;
INSERT INTO `city` VALUES ('11','龙岩市','8') ;
INSERT INTO `city` VALUES ('12','太原市','2') ;
INSERT INTO `city` VALUES ('13','大同','2') ;
INSERT INTO `city` VALUES ('14','呼和浩特','3') ;
INSERT INTO `city` VALUES ('15','包头','3') ;
INSERT INTO `city` VALUES ('16','呼伦贝尔','3') ;

2.Idea环境准备

请添加图片描述
请添加图片描述

3.JDBC工具类

resources包：

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/javaweb
user=root
password=123456

DButil类：

package com.javaweb.ajax.utils;

import java.sql.*;
import java.util.ResourceBundle;

/**
 * JDBC工具类
 */
public class DBUtil {
    //静态变量，类加载时执行
    //属性资源文件绑定
    private static ResourceBundle bundle = ResourceBundle.getBundle("resources.jdbc1");
    //根据属性配置文件key获取value
    private static String driver = bundle.getString("driver");
    private static String url = bundle.getString("url");
    private static String user = bundle.getString("user");
    private static String password = bundle.getString("password");

    static {//注册驱动，只需要注册一次就够了，放在静态代码块中，DBUtil类加载时执行
        try {
            Class.forName(driver);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取数据库连接对象
     * @return conn 连接对象
     * @throws SQLException
     */
    public static Connection getConnection()throws SQLException{
        Connection conn = DriverManager.getConnection(url,user,password);
        return conn;
    }

    /**
     * 释放资源
     * @param conn 连接对象
     * @param ps 数据库操作对象
     * @param rs 结果集对象
     */
    public static void close(Connection conn, Statement ps, ResultSet rs){
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (ps != null) {
            try {
                ps.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

4.index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>ajax根据省份id获取名称</title>
    <script type="text/javascript">
      function search(){
        //发起ajax请求，传递参数给服务器，服务器返回数据
        //1.创建异步对象
        var xmlHttp = new XMLHttpRequest();
        //2.绑定事件
        xmlHttp.onreadystatechange = function () {
          // alert(xmlHttp.readyState)
          if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            // alert(xmlHttp.responseText);
            //更新页面，就是更新dom对象
            document.getElementById("proname").value = xmlHttp.responseText;
          }
        };
        //3.初始异步对象
        var proid = document.getElementById("proid").value;
        xmlHttp.open("get","queryProvince?proid="+proid,true);
        //4.发送请求
        xmlHttp.send();
      }
    </script>
  </head>
  <body>
  <p>ajax根据省份id获取名称</p>
  <table>
    <tr>
      <td>省份编号：</td>
      <td><input type="text" id="proid">
          <input type="button" value="搜索" onclick="search()">
      </td>
    </tr>
    <tr>
      <td>省份名称：</td>
      <td><input type="text" id="proname"></td>
    </tr>
  </table>
  </body>
</html>

5.web.jsp

<servlet>
        <servlet-name>QueryProvince</servlet-name>
        <servlet-class>com.javaweb.ajax.controller.QueryProvinceServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryProvince</servlet-name>
        <url-pattern>/queryProvince</url-pattern>
    </servlet-mapping>

6.ProvinceDao类

package com.javaweb.ajax.dao;

import com.javaweb.ajax.utils.DBUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

//使用jdbc访问数据库
public class ProvinceDao {
    //根据id获取名称
    public String queryProvinceNameById(Integer provinceId){
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        String sql = "";
        String name = "";
        try {
            conn = DBUtil.getConnection();
            sql = "select name from pro where id = ?";
            ps = conn.prepareStatement(sql);
            ps.setInt(1, provinceId);
            //执行sql
            rs = ps.executeQuery();
            if(rs.next()){
                name = rs.getString("name");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(conn,ps,rs);
        }
        return name;
    }
}

7.QueryProvinceServlet类

package com.javaweb.ajax.controller;

import com.javaweb.ajax.dao.ProvinceDao;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class QueryProvinceServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        //System.out.println("响应ajax的请求");

        //处理get请求
        String proid = request.getParameter("proid");
        System.out.println("proid:" + proid);

        String name = "默认是无数据";
        //访问dao，查询数据库
        if(proid != null && !"".equals(proid.trim())){
            //创建dao对象，调用方法
            ProvinceDao dao = new ProvinceDao();
            name = dao.queryProvinceNameById(Integer.valueOf(proid));
        }

        //使用HttpServletResponse输出数据
        response.setContentType("text/html;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.println(name);
        pw.flush();
        pw.close();
    }
}

8.执行结果

请添加图片描述

二、ajax请求使用json格式的数据

1.环境准备

请添加图片描述

2.关于json用到的三个jar包

链接: https://pan.baidu.com/s/1Eo2AGLy0uQTeSOxPVcEbfg?pwd=fpuk
提取码: fpuk

3.实体类pojo：Province

package com.javaweb.ajax.pojo;

public class Province {
    private Integer id;
    private String name;
    private String jiancheng;
    private String shenghui;

    public Province() {
    }

    public Province(Integer id, String name, String jiancheng, String  shenghui) {
        this.id = id;
        this.name = name;
        this.jiancheng = jiancheng;
        this.shenghui = shenghui;
    }

    @Override
    public String toString() {
        return "Province{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", jiancheng='" + jiancheng + '\'' +
                ", shenghui=" + shenghui +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getJiancheng() {
        return jiancheng;
    }

    public void setJiancheng(String jiancheng) {
        this.jiancheng = jiancheng;
    }

    public String  getShenghui() {
        return shenghui;
    }

    public void setShenghui(String shenghui) {
        this.shenghui = shenghui;
    }
}

4.在ProvinceDao中添加以下代码

//根据id获取一个完整的Province对象
    public Province queryProvinceById(Integer provinceId){
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        String sql = "";
        Province province = null;
        try {
            conn = DBUtil.getConnection();
            sql = "select id,name,jiancheng,shenghui from pro where id = ?";
            ps = conn.prepareStatement(sql);
            ps.setInt(1, provinceId);
            //执行sql
            rs = ps.executeQuery();
            if(rs.next()){
                province = new Province();
                province.setId(rs.getInt("id"));
                province.setName(rs.getString("name"));
                province.setJiancheng(rs.getString("jiancheng"));
                province.setShenghui(rs.getString("shenghui"));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(conn,ps,rs);
        }
        return province;
    }

5.QueryJsonServlet类

package com.javaweb.ajax.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.javaweb.ajax.dao.ProvinceDao;
import com.javaweb.ajax.pojo.Province;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class QueryJsonServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //默认值，{} :表示json格式的数据
        String json = "{}";
        //获取请求参数，省份id
        String proid = request.getParameter("proid");

        //判断proid有值时调用dao查询数据
        if(proid != null && proid.trim().length() > 0){
            ProvinceDao dao = new ProvinceDao();
            Province p = dao.queryProvinceById(Integer.valueOf(proid));
            //需要使用jackson 把 Province对象转为 json
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(p);
        }

        //把数据的数据，通过网络传给ajax中的异步对象，响应结果数据
        //指定服务器端(servlet)返回给浏览器的是json格式的数据
        response.setContentType("application/json;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.println(json);//输出数据
        pw.flush();
        pw.close();
    }
}

6.web.xml

<servlet>
        <servlet-name>QueryJsonServlet</servlet-name>
        <servlet-class>com.javaweb.ajax.controller.QueryJsonServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryJsonServlet</servlet-name>
        <url-pattern>/queryjson</url-pattern>
    </servlet-mapping>

7.myajax.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用json格式的数据</title>
    <script type="text/javascript">
        function doSearch(){
            //1.创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //2.绑定事件
            xmlHttp.onreadystatechange = function (){
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var data = xmlHttp.responseText;
                    //eval是执行括号中的代码，把json字符串转为json对象
                    var jsonobj = eval("(" + data + ")");
                    //更新dom对象
                    // alert("data==="+data)
                    // callback(jsonobj);
                    document.getElementById("proname").value = jsonobj.name;
                    document.getElementById("projiancheng").value = jsonobj.jiancheng;
                    document.getElementById("proshenghui").value = jsonobj.shenghui;
                }
            }
            //3.初始异步对象的请求参数
            var proid = document.getElementById("proid").value;
            xmlHttp.open("get","queryjson?proid=" + proid,true);
            //4.发送请求
            xmlHttp.send();
        }
        //定义函数，处理服务器端返回的数据
        /*function callback(json){
            document.getElementById("proname").value = jsonobj.name;
            document.getElementById("projiancheng").value = jsonobj.jiancheng;
            document.getElementById("proshenghui").value = jsonobj.shenghui;
        }*/
    </script>
</head>
<body>
    <p>ajax请求使用json格式的数据</p>
    <table>
        <tr>
            <td>省份编号：</td>
            <td><input type="text" id="proid">
                <input type="button" value="搜索" onclick="doSearch()">
            </td>
        </tr>
        <tr>
            <td>省份名称：</td>
            <td><input type="text" id="proname"></td>
        </tr>
        <tr>
            <td>省份简称：</td>
            <td><input type="text" id="projiancheng"></td>
        </tr>
        <tr>
            <td>省会名称：</td>
            <td><input type="text" id="proshenghui"></td>
        </tr>
    </table>
</body>
</html>

8.结果图展示

请添加图片描述

AilingMin
关注
从数据库中读取数据（AJAX版本）
03-01
博文链接：https://qmug.iteye.com/blog/221703
ajax动态获取数据库中的数据方法
12-10
今天看到有人在问答上问怎样去动态取值附在option上，本来想解决的，但我发现。。。。没有，我本来也笨，记不住，所以还是写一下，让大家可以看一下： 首先我这用的框架是SSM，代码就开始了： 这是写在前台的方法里一个点击事件进入方法里我就不写那么麻烦了直接ajax部分代码： $.ajax({//这就开始进入ajax了 type:"get",//这个我也忘了，好像是类似格式吧，基本是死的不需要改动 dataType:"json",//这个是将字符串转换成json格式 cache:false,//不晓得 data:"staffName="+staffName+"&staffGender="+sta
Ajax实现分页查询
01-07
Ajax实现分页查询
5月17 利用AJAX查询数据库
weixin_30456039的博客
05-18 150
利用AJAX查询数据 <!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"> <he...
用AJAx实现的数据库查询
腰子叔叔的菜园
10-26 9895
1.mysql数据库 2.json的六个架包导入 json-jar包下载 3.Servlet后台dopost方法 查询到list对象之后： JSONArray jsonArray = JSONArray.fromObject(list);         response.getWriter().print(jsonArray.toString())
ajax动态查询数据库数据并显示在前台的方法
10-18
关于Ajax动态查询数据库数据并在前台显示的方法，首先需要理解几个关键知识点，即Ajax技术、动态查询以及数据库连接与操作。 Ajax全称为Asynchronous JavaScript and XML，即异步JavaScript与XML。它是一种在无需...
基于AJAX技术实现数据库数据读取
最新发布
08-07
一篇名为“从数据库中读取数据（AJAX 版本）”的博客文章，重点介绍了如何借助 AJAX 技术来实现这一功能。AJAX 即异步 JavaScript 和 XML，它可以在不刷新页面的情况下与服务器进行数据交换并更新部分网页内容，从而...
ajax访问数据库
cschengvdn的专栏
09-07 5861
http://www.w3school.com.cn/ajax/ajax_database.asp http://blog.youkuaiyun.com/cshmai/article/details/1103957 AJAX 可用来与数据库进行动态通信。 AJAX 数据库实例 下面的例子将演示网页如何通过 AJAX 从数据库读取信息： 请在下面的下拉列
通过ajax查询mysql数据并将查询数据返回
jiweidelu的博客
10-23 925
通过ajax查询mysql数据，并将返回的数据显示在待选列表中，再通过选择最终将选项加入到已选区，可以用在许多后台管理系统中。调用Multiselect插件。MYSQL数据表结构。Ajax查询数据操作。
ajax连接mysql数据库查询数据_ajax动态查询数据库数据并显示在前台的方法
weixin_29229989的博客
01-28 872
今天做了一个ajax动态查询数据库的小Demo，又重新学习了一下ajax的一些知识。在此和大家分享一下......啥都别说了，先上代码Controller层查询总用户数@RequestMapping(value = "/findTotalUsers.do",method = RequestMethod.GET)public @ResponseBody Long findTotalUsers(){M...
基于ajax的查询实现
01-12
ajax的查询实现,示例
Ajax查询
06-09
实现使用Ajax实现简单查询功能
web前端开发，ajax请求后台数据库并返回显示
weixin_42562567的博客
01-04 792
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>土壤污染重点管控系统</title> <link rel="stylesheet" href="css/mapIndex.css"/> <link rel="stylesheet" href="css/panel.css"/> <
ajax 动态获取数据库中的值
aabb100001的博客
06-02 518
功能简介： 在一个输入框中输入内容 ，当内容长度>1时向后发送ajax 从数据库中获取有关文本框中的内容在前台显示， 前台设计一些点击事件，以及jquery的应用 注意： request.getParameter("postData").trim() 放在判断之前可能会空指针异常 如果前面的为null null.trim() 就会报错如果没带参数直接访问也会报空指针的...
使用 AJAX+JSON 实现用户查询/添加功能
机械工程跑路哥
01-23 2456
**需求一**：在onload（页面加载完成）事件触发后，完成品牌列表查询； **需求二**：客户端点击button后，服务端将浏览器输入参数添加到数据库（需要使用JSON的反序列化）
ajax从数据库中查询获取数据,如何使用ajax从数据库获取正确的数据
weixin_39845406的博客
08-05 3223
在我的项目中，我使用ajax从数据库中获取数据。我测试数据内容，我选择alert(valData)成功函数。但不幸的是，没有从 ajax返回。我测试过如何使用ajax从数据库获取正确的数据select contact from IDC WHERE id=5;它在mysql cmd行中正常工作。这里是我的js代码：var stNum = 5;$.ajax({dataType:'json',type:...
AJAX查询
wanglei_smartfish的专栏
03-06 794
A。前台代码 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" >     无标题页          缩写词：             Width="166px">                         
ajax查询
Mr_ZhangAdd的博客
08-01 701
转自 https://blog.youkuaiyun.com/m0_37729679/article/details/78634069  如有侵权  请速联系我会及时删除 mavean依赖 &lt;!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --&gt; &lt;dependency&gt; &lt;groupId&gt;com...
java ajax查询功能_$.ajax和java后台实现用户查询的功能
weixin_42403100的博客
02-13 296
小编最近在做一个权限的项目，其中前端框架用的layui，即JSP页面，用ajax与后台(SSM框架)进行的交互，我们就以用户查询的功能来实现一下。html用户编码class="layui-input">用户名class="layui-input">学校编码class="layui-input">电子邮件class="layui-input">移动电话class="layui...
使用AJAX实现数据库动态模糊查询并在下拉框中展示
以“ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子)”为例，开发者可能会执行以下步骤： - 创建一个ASP.NET Web项目，并添加必要的页面。 - 在页面中添加一个下拉框（select）元素供用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值