ajax和jquery的联合使用

       jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、 HTML 、 XML 或 JSON 同时能够把接收的数据更新 到 DOM 对象。

2.6.1 $.ajax()

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。

语法：

$.ajax( { name:value, name:value, ... } )

说明：参数是 json 的数据，包含请求方式，数据，回调方法等

async ： 布尔值，表示请求是否异步处理。默认是 true

contentType ：发送数据到服务器时所使用的内容类型。默认是：

"application/x-www-form-urlencoded" 。

data ：规定要发送到服务器的数据，可以是： string ， 数组，多数是 json

dataType ：期望从服务器响应的数据类型。 jQuery 从 xml, json, text,, html 这些中测试最可能

的类型

"xml" - 一个 XML 文档

"html" - HTML 作为纯文本

"text" - 纯文本字符串

"json" - 以 JSON 运行响应，并以对象返回

以上是常用的参数。

error() , success() 中的 xhr 是 XMLHttpRequest 对象。

2.6.2 $.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。

语法： $.get(url,data,function(data,status,xhr),dataType)

url 必需。规定您需要请求的 URL 。

data 可选。规定连同请求发送到服务器的数据。

function(data,status,xhr) 可选。当请求成功时运行的函数。 data,status,xhr 是自定义形参名。

参数说明：

data - 包含来自请求的结果数据

status - 包含请求的状态（ "success" 、 "notmodified" 、 "error" 、 "timeout" 、 "parsererror" ）

xhr - 包含 XMLHttpRequest 对象

dataType 可选。规定预期的服务器响应的数据类型。默认地， jQuery 会智能判断。可能的类型：

"xml" - 一个 XML 文档

"html" - HTML 作为纯文本

"text" - 纯文本字符串

"json" - 以 JSON 运行响应，并以对象返回

2.6.3 $.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据。

语法： $.post(URL,data,function(data,status,xhr),dataType)

参数同 $get()

2.6.4 使用 AJAX 级联查询

效果图

数据库：user1

province ：省份表

city : 城市表

1.IDEA 创建 web 项目（ ajax-jquery ）

2.配置 web 运行环境 tomcat

发布项目：

3.module 添加 servlet 的 jar 包

之后选中 tomcat

5.添加 mysql 驱动和 jackson 的 jar

在 WEB-INF 目录下创建 lib 目录，拷贝 jar 文件

6.创建目录 js，拷贝 jQuery.js 文件

 

7. 创建实体类

1.省份实体类

package entity;

public class Province {
    private String pno;
    private String pname;

    public String getPno() {
        return pno;
    }

    public void setPno(String pno) {
        this.pno = pno;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }

    @Override
    public String toString() {
        return "Province{" +
                "pno='" + pno + '\'' +
                ", pname='" + pname + '\'' +
                '}';
    }
}

2.城市实体类

package entity;

public class City {
    private String cno;
    private String cname;
    private String pid;

    public String getCno() {
        return cno;
    }

    public void setCno(String cno) {
        this.cno = cno;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public String getPid() {
        return pid;
    }

    public void setPid(String pid) {
        this.pid = pid;
    }

    @Override
    public String toString() {
        return "City{" +
                "cno='" + cno + '\'' +
                ", cname='" + cname + '\'' +
                ", pid='" + pid + '\'' +
                '}';
    }
}

8. 创建 QueryDao 查询数据

package dao;

import entity.City;
import entity.Province;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class QueryDao {

    private Connection conn;
    private PreparedStatement ps;
    private ResultSet rs;
    private String sql;
    private String url="jdbc:mysql://localhost:3306/user1";
    private String userName="root";
    private String userPwd="123456";

    //查询所有的省份信息
    public List<Province> queryProvinceList(){
        List<Province> provinces=new ArrayList<>();
        try{
            Province p=null;
            Class.forName("com.mysql.jdbc.Driver");
            conn=DriverManager.getConnection(url,userName,userPwd);
            sql="select * from province order by pno";
            ps=conn.prepareStatement(sql);
            rs=ps.executeQuery();
            while (rs.next()){
                p=new Province();
                p.setPno(rs.getString("pno"));
                p.setPname(rs.getString("pname"));
                provinces.add(p);
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            try{
                if (rs!=null){
                    rs.close();
                }
                if (ps!=null){
                    ps.close();
                }
                if (conn!=null){
                    conn.close();
                }
            }catch (Exception e){
                e.printStackTrace();
            }
        }
        return provinces;
    }


    //查询所有的城市信息
    public List<City> queryCityList(String pid){
        List<City> cities=new ArrayList<>();
        try{
            City c=null;
            Class.forName("com.mysql.jdbc.Driver");
            conn=DriverManager.getConnection(url,userName,userPwd);
            sql="select cno,cname from city where pid=?";
            ps=conn.prepareStatement(sql);
            //设置省份的参数值
            ps.setString(1,pid);
            rs=ps.executeQuery();
            while (rs.next()){
                c=new City();
                c.setCno(rs.getString("cno"));
                c.setCname(rs.getString("cname"));
                cities.add(c);
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            try{
                if (rs!=null){
                    rs.close();
                }
                if (ps!=null){
                    ps.close();
                }
                if (conn!=null){
                    conn.close();
                }
            }catch (Exception e){
                e.printStackTrace();
            }
        }
        return cities;
    }
}

9. 创建查询省份的 Servlet – QueryProvice

package servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import dao.QueryDao;
import entity.Province;

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

public class QueryProvinceServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
       String json="{}";
        QueryDao queryDao=new QueryDao();
        List<Province> provinces =queryDao.queryProvinceList();
        //把list转为json格式的数据，输出给ajax请求。
        if (provinces!=null){
            ObjectMapper om=new ObjectMapper();
            json=om.writeValueAsString(provinces);
        }
        //输出json数据，响应ajax请求，返回数据。
        //request.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out=response.getWriter();
        out.println(json);
        out.flush();
        out.close();
    }
}

10. 创建查询城市的 Servlet --- QueryCity

package servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import dao.QueryDao;
import entity.City;

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;
import java.util.List;

public class QueryCityServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json="{}";
        String strPid= request.getParameter("proid");
        if (strPid!=null && !"".equals(strPid.trim())){
            QueryDao dao=new QueryDao();
            List<City> cityList=dao.queryCityList(strPid);
            ObjectMapper objectMapper=new ObjectMapper();
            json =objectMapper.writeValueAsString(cityList);
        }
        response.setContentType("application/json;charset=utf-8");
        PrintWriter printWriter=response.getWriter();
        printWriter.println(json);
        printWriter.flush();
        printWriter.close();
    }

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

    }
}

11.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>QueryProvinceServlet</servlet-name>
        <servlet-class>servlet.QueryProvinceServlet</servlet-class>
    </servlet>

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

    <servlet>
        <servlet-name>QueryCityServlet</servlet-name>
        <servlet-class>servlet.QueryCityServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryCityServlet</servlet-name>
        <url-pattern>/QueryCityServlet</url-pattern>
    </servlet-mapping>
    
</web-app>

12. 修改 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>省市级联查询</title>
      <script type="text/javascript" src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script></script>
      <script type="text/javascript">

        function loadDataAjax(){
          $.ajax({
            url:"QueryProvinceServlet",
            dataType:"json",
            success:function (r) {
              //删除旧的数据，把已经存在的数据清空
              $("#province").empty()
              //循环该数组，数组里面是多个json对象。
              //i代表是第几个json对象，n代表这个json对象
              $.each(r,function (i,n) {
                $("#province").append("<option value='"+n.pno+"'>"+n.pname+"</option>")
              })
            },
            error:function () {
              alert("接收失败！");
            }
          })
        }

          $(function () {
            loadDataAjax();
              $("#btn_load").click(function () {
                loadDataAjax();
              })
            //给省份的select绑定一个change事件，当select内容发生改变时，触发事件
            $("#province").change(function () {
              //获取选中的列表框的值
              var obj=$("#province>option:selected");
              var provinceId=obj.val();
              //继续做一个ajax请求，获取省份所对应的所有城市信息
              $.post("QueryCityServlet",{proid:provinceId},function (r) {
                $("#city").empty();
                $.each(r,function (i,n) {
                  $("#city").append("<option  value='"+n.cno+"'>"+n.cname+"</option >")
                })
              },"json");
            })
          })
      </script>
  </head>
  <body>
<p>省市级联查询，使用ajax,json,jquery</p>
  <table>
    <input type="button" value="loadData" id="btn_load">
    <tr>
      <td>省份：</td>
      <td>
        <select id="province">
          <option value="0">请选择省份</option>
        </select>
      </td>

    </tr>
    <tr>
      <td>城市：</td>
      <td>
        <select id="city">
          <option value="0">请选择城市</option>
        </select>
      </td>
    </tr>
  </table>
  </body>
</html>

项目结构