1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Ajax的使用 实现省市区三级联动

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

时间:2022-05-01 09:07:38

相关推荐

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

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

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

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

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

异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式

易懂的理解:

异步传输: 你传输吧,我去做我的事了,传输完了告诉我一声

同步传输: 你现在传输,我要亲眼看你传输完成,才去做别的事

什么是Ajax?

Ajax的技术的产生Ajax被认为是(Asynchronous JavaScript and XML的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.不用刷新整个页面便可与服务器通讯的办法: Flash Java applet 框架:如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个页面 隐藏的 iframeXMLHttpRequest:该对象是对 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 {@Overrideprotected 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());}@Overrideprotected 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 {@Overrideprotected 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());}@Overrideprotected 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 {@Overrideprotected 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());}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。