jQuery (Ajax+json front and back data interaction)

Keywords: JSON Java JQuery xml

  1. jackson
    Jackson is a simple java application library. Jackson can easily convert Java objects into json objects
    And xml documents, you can also convert json and xml into Java objects
   Core code:
   ObjectMapper mapper = new ObjectMapper();
   mapper.writeValueAsString(obj);
//Number of rows to get source data
 int count = md.getColumnCount();
 map.put(md.getColumnName(i), rs.getObject(i));
  1. jackson will java – > JSON
    2.1 JavaBean/Map
    {}
//json object
Student stu1=new Student("s001","Zhang San");
ObjectMapper mapper = new ObjectMapper();
System.out.println(mapper.writeValueAsString(stu1));
//Results: {sid: "s001",sname: "Zhang San"}

2.2 array / List/Set
[]

Student stu2=new Student("s002","Li Si");
List<Student> list=new ArrayList<>();
list.add(stu1);
list.add(stu2);
System.out.println(mapper.writeValueAsString(list));
//Results: [{sid: "s001",sname: "Zhang San"}, {sid:"s002",sname: "Li Si"}]

2.3 embedded class
Mixed mode

Map<String, Object> map=new HashMap<>();
map.put("total",2);
map.put("stus",list);
//Results: {"total":2,"stus":[{sid: "s001",sname: "Zhang San"}, {sid:"s002",sname: "Li Si"}]}
  1. Java - > JSON loop
    Ignore one direction of bidirectional association

    @JsonIgnore / program control

  2. ajax request of jQuery
    $.ajax
    url
    Add a time stamp after the URL to prevent the browser from slowing down: xxx?ts=new Date().getTime()
    success
    dataType
    error

  3. Ajax of jQuery

//Custom jQuery ajax plug-in
   //Get all provinces
$(function(){
	var ctx=$("#ctx").val(); / / get the project name according to the id
	$.ajax({
		url:ctx+"/regionServlet",//Request path
	    success:function(data){
		for(index in data){                                    //data[index].ID get provincial id, data [index]. Region [name (specific province)  
			$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>")
		}
	},
	dataType:"json"
	});
	//Get all the cities
	$("#province").change(function(){
		$("option:gt(0)","#city").remove(); / / clear the city drop-down box
		$("option:gt(0)","#Count "). Remove(); / / clear the county dropdown box
		$.ajax({
			url:ctx+"/regionServlet?ID="+this.value,  //ID refers to the city level of the province
		    success:function(data){
		    	console.log(data);
			for(index in data){                                 //data[index].ID get the city id, data [index]. Region [name (specific city level)  
				$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>")
			}
		},
		dataType:"json"
		});
		//Get all the counties
		$("#city").change(function(){
			$("option:gt(0)","#Count "). Remove(); / / clear the county dropdown box
			$.ajax({
				url:ctx+"/regionServlet?ID="+this.value,   //ID refers to the city level of the province
			    success:function(data){
				for(index in data){
				                               //data[index].ID get County id, data [index]. Region [name (specific county)  
					$("#county").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>")
				}
			},
			dataType:"json"
			});
		});
	});
	
})

Page code of three-level linkage

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ include file="/jsp/common/head.jsp"%>     //Include address of plug-in
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
	<h1>$.ajax Realize linkage between provinces and cities</h1>
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
	<div>
		Receiving address&nbsp;&nbsp;
		<select id="province">
			<option selected="selected">---Please select a province---</option>
		</select>&nbsp;&nbsp;
		<select id="city">
			<option selected="selected">---Please select a city---</option>
		</select>&nbsp;&nbsp;
		<select id="county">
			<option selected="selected">---Please select a county---</option>
		</select>
	</div>
</div>
</body>
</html>

Posted by Thundarfoot on Fri, 27 Dec 2019 13:45:46 -0800