Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve three-level linkage effect of Ajax, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Import datasheets and gson.jar

The table includes all provinces, cities, counties and districts in China, which are related by parentid.

Second, back-end code

Because the data of each level is based on the id query of the previous level, and the logic is very similar, we only need one interface to complete the linkage of three or more levels. in this case, our core query is select * from area where parentid=# {pid}.

Entity

Package com.codeXie.entity;import java.io.Serializable;public class Area implements Serializable {private String areaid; private String areaname; private String parentid; private Integer arealevel; private Integer status; public Area () {} public Area (String areaid, String areaname, String parentid, Integer arealevel, Integer status) {this.areaid = areaid; this.areaname = areaname; this.parentid = parentid; this.arealevel = arealevel This.status = status;}. Omit set, get} for each attribute

Mapper

Public interface AreaMapper {@ Select ("select * from area where parentid=# {pid}") List selectMore (Integer pid);}

Service

Public interface AreaService {List findCity (int pid);}

Servlet

@ WebServlet ("/ AreaServlet") public class AreaServlet extends HttpServlet {@ Override protected void service (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setCharacterEncoding ("utf-8"); resp.setContentType ("text/html;charset=utf-8"); String pid = req.getParameter ("pid"); AreaServiceImpl service = new AreaServiceImpl (); List areas = service.findCity (Integer.parseInt (pid)); String json = new Gson (). ToJson (areas) Resp.getWriter () print (json) Third, front-end code function produceOption (id,list) {console.log (list) $(id). Empty () $(list). Each ((index) Item) = > {$(id) .append ("" + item.areaname+ ")})} $() = > {$.ajax ({url:" AreaServlet ", method:" post ", data: {pid:0}, dataType:" json " Success: function (res) {produceOption ("# proviance") Res) $("# proviance") .prepend ("Please select a province")}) $("# proviance") .change (function () {var pid = $(this) .prop ("value") $.ajax ({url: "AreaServlet", method: "post") Data: {pid:pid}, dataType: "json", success: function (res) {produceOption ("# city", res) $("# city") .prepend ("Please select a city")})}) $("# city") .on ("change") Function () {var pid = $(this) .prop ("value") $.ajax ({url: "AreaServlet", method: "post", data: {pid:pid}, dataType: "json", success: function (res) {produceOption ("# country") Res)}})}) three-level linkage selection province selection city Please select the region above is all the content of the article "how to achieve the three-level linkage effect of Ajax" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.