Openlayers Learning notes 8--using a servlet to get data from a database and annotate

These two days in the library to look at the JSP side to write code, change the boss entrusted to the task, also incidentally realized the effect of the query, first look at the final realization:

The entire implementation idea is: The server side uses Servlet+mysql fuzzy query, the servlet returns the JSON data, the client parses the JSON data to display in the tabular form and according to the latitude and longitude on the map annotation.

1. Server-side servlet code:

Package Edu.whu.vge.servlet;import Java.io.ioexception;import Java.io.printwriter;import java.sql.ResultSet;import Java.sql.sqlexception;import Javax.servlet.servletexception;import Javax.servlet.http.httpservlet;import Javax.servlet.http.httpservletrequest;import Javax.servlet.http.httpservletresponse;import Net.sf.json.JSONArray ; Import Net.sf.json.jsonobject;import Edu.whu.vge.dbutil.poidbbean;public class Schoolqueryservlet extends HttpServlet {private static final long Serialversionuid = 1l;/* * (non-javadoc) * * @see * javax.servlet.http.HttpServlet #doPost (Javax.servlet.http.HttpServletRequest *, javax.servlet.http.HttpServletResponse) */@Overrideprotected void DoPost (httpservletrequest request,httpservletresponse response) throws Servletexception, IOException {// Set the output content format and encoding Response.setcontenttype ("Text/html;charset=utf-8"); PrintWriter out = Response.getwriter ();//set receive parameter encoding format response.setcharacterencoding ("Utf-8"); String SchoolID = Request.getparameter ("SchoolID"); String SchoolnAme = Request.getparameter ("Schoolname"); String schooladdress = Request.getparameter ("schooladdress"); String sql = "SELECT * from school where ID like" + "\" + "%" + schoolid + "%" + "\" + "+" + "+" + "+" + "+" + S Choolname + "%" + "\" "+" and address like "+" \ "+"% "+ schooladdress +"% "+" \ "; Poidbbean Poidbbean = new Poidbbean ()//jsonarray array = new Jsonarray (); try {ResultSet ResultSet = poidbbean.query (sql); while (Resultset.next ()) {Jsonobject object = new Jsonobject (). Element ("Schoolname", resultset.getstring (4)). Element ( "Schooladdress", resultset.getstring (5)). Element ("Schooltel", resultset.getstring (6)). Element ("Schoolkind", Resultset.getstring (7)). Element ("Schoollat", Resultset.getdouble (3)). Element ("Schoollon", resultset.getdouble (2) ); Array.add (object);} Out.println (Array.tostring ()); System.out.println (Array.tostring ());} catch (SQLException e) {//Todo auto-generated catch Blocke.printstacktrace ();} catch (ClassNotFoundException e) {//TODO Auto-generated CatCH Blocke.printstacktrace ();} Finally {try {poidbbean.close ()} catch (SQLException e) {//TODO auto-generated catch Blocke.printstacktrace ();}}} public void Destroy () {Super.destroy ();//Just puts "destroy" string in log//Put your code here}/** * initialization of The servlet.  <br> * * @throws servletexception * If an error occurs */public void init () throws Servletexception {// Put your code here}}

Here is a look at the knowledge of the servlet. 2, the client request code: Here using the jquery Ajax method asynchronous request server-side servlet,jquery and Ajax see: W3cschool. The code is as follows:

  $.ajax ({                    URL: "Http://127.0.0.1:8080/taxGIS/servlet/SchoolQueryServlet",            type: ' Post ',            dataType: ' JSON ',            data: {                SchoolID: $ ("#schoolID"). Val (),                schoolname: $ ("#schoolName"). Val (),                schooladdress: $ ("#schoolAddress"). Val ()            },            success:function (jsondata) {                //query returns data after callout on map and enable Query Results Display dialog box                Patchaddmarker (jsondata);                Showqueryres (Jsondata);            }                    });

3. Parse the JSON and label it on the map: Take the first query as an example, the JSON data are as follows:

[{"Schoolname": "Chengyang District second experimental secondary School", "schooladdress": "Shandong Province Qingdao Chengyang District Li Yang Road No. 107th", "Schooltel": "0532-81156666" , "Schoolkind": "Education school: Middle School", "Schoollat": 36.28491, "Schoollon": 120.40238}, {"Schoo         LName ":" Small Stockade Kindergarten "," schooladdress ":" Shandong Province Qingdao Chengyang District "," Schooltel ":", "Schoolkind": "Education School: Kindergarten", "Schoollat": 36.29791, "Schoollon": 120.39172}, {"Schoolname": "New Sun Custodian Center", "Schooladdres         S ":" Shibei District Jiaxing Road, Qingdao, Shandong province 11-2 "," Schooltel ":" "," Schoolkind ":" Education School: Kindergarten "," Schoollat ": 36.10921, "Schoollon": 120.35659}, {"Schoolname": "Golden Apple Kindergarten (Xiangjiang hospital West)", "Schooladdress": No. No. 311, Xiangjiang Road, Qingdao Huangdao District, Shandong Province (west of Xiangjiang Hospital) ) "," Schooltel ":" "," Schoolkind ":" Education School: Kindergarten "," Schoollat ": 35.97422," Schoollon ": 120.16         204}, {"Schoolname": "Kam Kiu Community Support Center", "schooladdress": "Shandong Qingdao Huangdao District Wang Jia Qiao cun Jin Qiao Community", "Schooltel": ", "Schoolkind": "TeachSchool: Kindergarten "," Schoollat ": 35.87418," Schoollon ": 120.00619}, {" Schoolname ":" Arts star Kindergarten ", "Schooladdress": "Qingdao Chengyang District, Shandong Province 541", "Schooltel": "", "Schoolkind": "Education School: Kindergarten", "Schoollat": 36.3 3419, "Schoollon": 120.2701}, {"Schoolname": "Hidden Pearl subdistrict Office Center Kindergarten", "schooladdress": "Qingdao Jiaonan Ling Hai, Shandong Province" Road 126th "," Schooltel ":" "," Schoolkind ":" Education School: Kindergarten "," Schoollat ": 35.89869," Schoollon ": 12         0.0444}, {"Schoolname": "Hui Connaught Home", "schooladdress": "Shandong Province Qingdao Huangdao District Hongqiao Avenue 83-5", "Schooltel": "", "Schoolkind": "Education School: Kindergarten", "Schoollat": 35.87653, "Schoollon": 120.00338}, {"School         Name ":" Sifang District Shangzhi Kindergarten "," schooladdress ":" Shandong Province Qingdao Shibei District Shangzhi Road 4 "," Schooltel ":" "," Schoolkind ":" Education School: Kindergarten ", "Schoollat": 36.11456, "Schoollon": 120.35691}, {"Schoolname": "Baby Home parent-child Garden", "Schoolad Dress ":" 58, Qingdao Road, Laoshan District, Shandong Province-1 "," Schooltel ":" (0532) 88891918, (0532) 88893227 "," Schoolkind ":" Education School: Kindergarten "," Schoollat ": 36.10406, "Schoollon": 120.47963}, {"Schoolname": "Naïve kindergarten (the office of the People's Congress of Lingshan Street)", "schooladdress": "Shandong Province Green         Island City Huangdao District 329 Provincial Road (Lingshan Wei subdistrict Office of the People's Congress) "," Schooltel ":", "Schoolkind": "Education School: Kindergarten", "Schoollat": 35.93806,         "Schoollon": 120.15021}, {"Schoolname": "Chengyang District Chengyang Street Soap Nursery Kindergarten", "schooladdress": "Shandong Province Qingdao Chengyang District Zhengyang Zhong Lu",    "Schooltel": "", "Schoolkind": "Education School: Kindergarten", "Schoollat": 36.30772, "Schoollon": 120.35847 }, {"Schoolname": "Jiaonan Wang Tai Zhen Liang Shan Primary School", "schooladdress": "Shandong Province Qingdao Huangdao District", "Schooltel": "0532-83116752" , "Schoolkind": "Education School: Primary School", "Schoollat": 36.07053, "Schoollon": 120.03613}]

JSON parsing can be json2.js or using JS's eval function. The latter is used here, the code is as follows, it is simply not explained.

function Patchaddmarker (jsondata) {    var jsonarray = eval (jsondata);    for (var i = 0; i < jsonarray.length; i++) {        var schoolname = jsonarray[i].schoolname;        var schooladdress = jsonarray[i].schooladdress;        var schooltel = Jsonarray[i].schooltel;        var schoolkind = Jsonarray[i].schoolkind;        var schoollat = Jsonarray[i].schoollat;        var schoollon = Jsonarray[i].schoollon;                var Lonlat = Cortransform (Schoollon, Schoollat);        var lonlatstr = lonlat.toshortstring ();        var Lonlatarr = Lonlatstr.split (",");        var lon = lonlatarr[0];        var lat = lonlatarr[1];                var att = {            name: Schoolname,            Address: schooladdress,            Tel: schooltel,            Category: Schoolkind                };        Addmarke (lon, LAT, att);}    }

4, the table shows: here using the jquery Easyui DataGrid control to achieve, the use of its table control online has a lot of blog, reference can be achieved, here no longer expanded. 5, Summary 1, encountered a cross-domain problem, the client requested no access results. Workaround: The access address is: http://127.0.0.1:8080/taxGIS/index.jsp; not http://localhost:8080/taxGIS/index.jsp2, Jquery-ui, and jquery Easyui conflict issues. Both are based on jquery, some methods and property names are the same, resulting in a conflict, looking at the introduction of its JS sequence, after the introduction of the overlay introduced first. I mainly use Jquery-ui dialogs and buttons and folding bars, and jquery Easyui only use the DataGrid, so my reference is this: jquery--->jquery-ui--->jquery easyui

<script src= "Lib/jquery/js/jquery-1.10.2.js" ></script>        <script src= "lib/jquery-easyui-1.4.2/ Jquery.easyui.min.js "></script>        <script src=" Lib/jquery/js/jquery-ui-1.10.4.custom.js "></ Script>

3, the front-end development with more knowledge and miscellaneous, unlike C #, Java development only in one language. At first you may feel at a loss, but as long as the heart, after entering the door will be easier. 4, focus on the development of the deployment of cheap, user experience, can not be done by the deployment of things is very complex and not practical.

Openlayers Learning notes 8--using a servlet to get data from a database and annotate