Ajax的使用，实现省市区三级联动

最新推荐文章于 2024-08-28 09:33:24 发布

Java程序猿哦~

最新推荐文章于 2024-08-28 09:33:24 发布

阅读量1.5k

点赞数 2

文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/m0_64896985/article/details/122259030

版权

•举个例子：普通B/S模式(同步) AJAX技术(异步)

同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

易懂的理解:

异步传输: 你传输吧，我去做我的事了，传输完了告诉我一声
同步传输: 你现在传输，我要亲眼看你传输完成，才去做别的事

什么是Ajax？

Ajax的技术的产生

Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

不用刷新整个页面便可与服务器通讯的办法：

Flash

Java applet

框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面

隐藏的 iframe

XMLHttpRequest ：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。 实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词

Ajax 的核心是 JavaScript 对象 XmlHttpRequest 。

该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

AJAX 采用异步交互过程。 AJAX 在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。

用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。

AJAX 引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的流 。现在，可以用 Javascript 调用 AJAX 引擎来代替产生一个 HTTP 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给 AJAX 来执行。

使用 AJAX ，可以为 JSP 、开发人员、终端用户带来可见的便捷。

AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

• 服务器端语言 ：服务器需要具备向浏览器发送特定信息的能力。 Ajax与服务器端语言无关 。

• XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。 AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择

• XHTML （eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS （Cascading Style Sheet,级联样式单） 标准化呈现；

• DOM （Document Object Model,文档对象模型） 实现动态显示和交互；

• 使用XMLHTTP组件 XMLHttpRequest对象 进行 异步数据读取

• 使用 JavaScript绑定和处理所有数据

Ajax的get和post的区别？

若符合下列任一情况，则用POST方法：

* 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
* 若使用GET方法，则表单上收集的数据可能让URL过长。
* 要传送的数据不是采用7位的ASCII编码。

若符合下列任一情况，则用GET方法：

* 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
* 请求结果无持续性的副作用。
* 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

如何实现省市区三级联动？


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.8.3.js"type="text/javascript"></script>
</head>
<script type="text/javascript">
    $(function (){
       $.ajax({
          type:"get",
          url:"provinceAll",
          dataType:"json",
          success:function (data){
              for (var i = 0; i <data.length ; i++) {
                  $("#province").append("<option value='"+data[i].pid+"'>"+data[i].pname+"</option>");
              }
          }
       });
       $("#province").change(function (){
          $("#city option:gt(0)").remove();
           $("#district option:gt(0)").remove();
           $.ajax({
               type:"get",
               url:"cityAll?pid="+$("#province").val(),
               dataType:"json",
               success:function (data){
                   for (var i = 0; i <data.length ; i++) {
                       $("#city").append("<option value='"+data[i].cid+"'>"+data[i].cname+"</option>");
                   }
               }
           });
       });
        $("#city").change(function (){
            $("#district option:gt(0)").remove();
            $.ajax({
                type:"get",
                url:"districtAll?cid="+$("#city").val(),
                dataType:"json",
                success:function (data){
                    for (var i = 0; i <data.length ; i++) {
                        $("#district").append("<option value='"+data[i].did+"'>"+data[i].dname+"</option>");
                    }
                }
            });
        });
    });
</script>
<body>
<select id="province">
    <option>请选择省</option>
</select>省
<select id="city">
    <option>请选择市</option>
</select>市
<select id="district">
    <option>请选择区</option>
</select>区
</body>
</html>

package Level3LinkageServlet;

import JDBC.DBHelper;
import Provinces.City;
import Provinces.Province;
import net.sf.json.JSONArray;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "cityAllServlet", value = "/cityAll")
public class cityAllServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String pid=request.getParameter("pid");
        int pid1=Integer.parseInt(pid);
        Connection con= DBHelper.getConn();
        String sql="select*from city where pid=?";
        List<City> clist=new ArrayList<City>();
        City ci=null;
        try {
            PreparedStatement ps=con.prepareStatement(sql);
            ps.setInt(1,pid1);
            ResultSet rs=ps.executeQuery();
            while (rs.next()){
                ci=new City(rs.getInt(1),rs.getString(2),rs.getInt(3));
                clist.add(ci);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        JSONArray json=JSONArray.fromObject(clist);
        response.getWriter().write(json.toString());
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

package Level3LinkageServlet;

import JDBC.DBHelper;
import Provinces.Province;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "provinceAllServlet", value = "/provinceAll")
public class provinceAllServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Connection con= DBHelper.getConn();
        String sql="select*from province";
        List<Province> plist=new ArrayList<Province>();
        Province pv=null;
        try {
            PreparedStatement ps=con.prepareStatement(sql);
            ResultSet rs=ps.executeQuery();
            while (rs.next()){
                pv=new Province(rs.getInt(1),rs.getString(2));
                plist.add(pv);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        JSONArray json=JSONArray.fromObject(plist);
        response.getWriter().write(json.toString());
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

package Level3LinkageServlet;

import JDBC.DBHelper;
import Provinces.City;
import Provinces.District;
import net.sf.json.JSONArray;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "districtAllServlet", value = "/districtAll")
public class districtAllServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String cid=request.getParameter("cid");
        int cid1=Integer.parseInt(cid);
        Connection con= DBHelper.getConn();
        String sql="select*from district where cid=?";
        List<District> dlist=new ArrayList<District>();
        District di=null;
        try {
            PreparedStatement ps=con.prepareStatement(sql);
            ps.setInt(1,cid1);
            ResultSet rs=ps.executeQuery();
            while (rs.next()){
                di=new District(rs.getInt(1),rs.getString(2),rs.getInt(3));
                dlist.add(di);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        JSONArray json=JSONArray.fromObject(dlist);
        System.out.println(json);
        response.getWriter().write(json.toString());
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}