jquery-210813-01---jquery实现ajax请求案例

关注

原创最新推荐文章于 2026-04-25 09:12:49 发布 589 阅读 AI 写同款· GEO 优化 ›

Jquery Ajax 请求示例目录一、引入jquery文件二、完整ajax例子一、引入jquery文件在使用jquery ajax之前，需要先引入jquery文件。可以使用cdn也可以使用本地jquery文件。推荐一个CDN加速网站：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 二、完整ajax 阅读详情

index.jsp（发起ajax请求）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery实现ajax请求</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">

        $(function (){
            $("#btnSearch").click(function (){
                // 获取dom的value值
                var proid = $("#proid").val();

                // 发起ajax请求
                $.ajax({
                    url:"queryJsonServlet",
                    data:{
                        "proid":proid
                    },
                    dataType:"json",
                    success:function (resp){
                        // resp是json对象
                        // alert(resp.name);
                        $("#proname").val(resp.name);
                        $("#projiancheng").val(resp.jiancheng);
                        $("#proshenghui").val(resp.shenghui);
                    }
                })
            });
        })
    </script>
</head>
  <body>
  <p>ajax格式请求使用json格式数据</p>
  <table>
      <tr>
          <td>
              省份编号：
          </td>
          <td>
              <input type="text" id="proid"/>
              <input type="submit" id="btnSearch" value="查找"/>
          </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>

QueryJsonServlet.java（接收浏览器请求，响应请求）

package com.bgy.controller;

import com.bgy.dao.ProviceObjectDao;
import com.bgy.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;

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 {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // 设置一个json的默认值 ，即 {}
        String json = "{}";

        // 接收请求参数
        String strProid = request.getParameter("proid");
        System.out.println("我接收到了数据");
        System.out.println("proid："+strProid);

        // 判断请求参数是否有数据
        if ( strProid != null && strProid.trim().length()>0 ) {
            ProviceObjectDao proviceDao = new ProviceObjectDao();
            Province province = proviceDao.queryProviceNameById(Integer.valueOf(strProid));

            // 使用jackson 把province对象转为json
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(province);
        }

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

ProviceObjectDao.java（连接数据库，做查询）

package com.bgy.dao;

import com.bgy.entity.Province;

import java.sql.*;

public class ProviceObjectDao {

    // 根据id获取名称
    public Province queryProviceNameById(Integer proviceID){

        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs = null;

        String sql = "";
        String url = "jdbc:mysql://localhost:3306/springdb?&useSSL=false&serverTimezone=UTC";
        String username = "root";
        String password = "admin";

        Province province = null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);

            sql = "select id,name,jiancheng,shenghui from province where id=?";
            pst = conn.prepareStatement(sql);
            pst.setInt(1,proviceID);

            rs = pst.executeQuery();

            while (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"));
                System.out.println(province);
            }

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs != null) {
                    rs.close();
                }
                if (pst != null) {
                    pst.close();
                }
                if (conn != null) {
                    conn.close();
                }
            }  catch (SQLException e) {
                e.printStackTrace();
            }
        }

        return province;
    }
}

web.xml（servlet映射）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    
    <servlet>
        <servlet-name>QueryJsonServlet</servlet-name>
        <servlet-class>com.bgy.controller.QueryJsonServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryJsonServlet</servlet-name>
        <url-pattern>/queryJsonServlet</url-pattern>
    </servlet-mapping>
</web-app>

Province.java（实体类）

package com.bgy.entity;

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;
    }

    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;
    }

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