Under normal circumstances, it's more convenient to complete the function in JSP page. Compared with JSP page, it's more convenient to use, and there will be special circumstances. HTML page is needed to display the data, and the data needs to be acquired and displayed dynamically, so js method is used to interact with HTML page.

1. Introduce css style, jQuery and other necessary files in HTML page, and introduce JS corresponding to data processing in HTML page (also can be mapped in HTML page

Collection position

2. Get the data in the corresponding js, and dynamically transfer the data content to the HTML page
test.js
$(function(){
load_info();
});

var pageNum = 1;
function load_info(){
var para = {};
//Call the corresponding controller method
$.tgajax("/happ/personal/getAllFavoriteById.action",para,function (data) {
if (data.resultCode == "0000") {
strs="";
//Will get the data to traverse
$.each(data.resultData, function (i, value) {
//Normal salary and internship salary. If it is 0, this position will not be recruited
//Normal wage
var salary = value.V_SALARY;
//Internship salary
var sx_salary = value.V_SX_SALARY;

        	if(salary != 0 && sx_salary == 0){
        		strs += "<ul>" +
        		"        <li class=\"mar-no\">"+
        		"        <a href=\"#\" onclick=\"open_details("+ value.J_ID+")\" >"+
        		"        <div class=\"post\">"+
        		"        <div class=\"left\">"+ value.V_TITLE +"</div>"+
        		"        <div class=\"right\">"+ salary +"</div>"+
        		"        </div>"+
        		"        <div class=\"company1\">"+ value.C_NAME +"</div>"+
        		"        <div class=\"time\" style=\"margin: 0;\">"+
        		"        <div class=\"left\">"+ value.V_CITY +" | Experience is not limited. | Undergraduate</div>"+
        		"        <div class=\"right\">Published:"+ value.RELEASE_TIME +"</div>"+
        		"        </div>"+
        		"        </a>"+
        		"        </li>"+
        		"        </ul>";
        	}else if(salary == 0 && sx_salary != 0){
        		strs += "<ul>" +
        		"        <li class=\"mar-no\">"+
        		"        <a href=\"#\" onclick=\"open_details("+ value.J_ID+")\" >"+
        		"        <div class=\"post\">"+
        		"        <div class=\"left\">"+ value.V_TITLE +"</div>"+
        		"        <div class=\"right\">"+ sx_salary +"(Internship)</div>"+
        		"        </div>"+
        		"        <div class=\"company1\">"+ value.C_NAME +"</div>"+
        		"        <div class=\"time\" style=\"margin: 0;\">"+
        		"        <div class=\"left\">"+ value.V_CITY +" | Experience is not limited. | Undergraduate</div>"+
        		"        <div class=\"right\">Published:"+ value.RELEASE_TIME +"</div>"+
        		"        </div>"+
        		"        </a>"+
        		"        </li>"+
        		"        </ul>";
        	}else if(salary != 0 && sx_salary != 0){
        		strs += "<ul>" +
        		"        <li class=\"mar-no\">"+
        		"        <a href=\"#\" onclick=\"open_details("+ value.J_ID+")\" >"+
        		"        <div class=\"post\">"+
        		"        <div class=\"left\">"+ value.V_TITLE +"</div>"+
        		"        <div class=\"right\">"+ sx_salary+ "(Internship)/" + salary +"</div>"+
        		"        </div>"+
        		"        <div class=\"company1\">"+ value.C_NAME +"</div>"+
        		"        <div class=\"time\" style=\"margin: 0;\">"+
        		"        <div class=\"left\">"+ value.V_CITY +" | Experience is not limited. | Undergraduate</div>"+
        		"        <div class=\"right\">Published:"+ value.RELEASE_TIME +"</div>"+
        		"        </div>"+
        		"        </a>"+
        		"        </li>"+
        		"        </ul>";
        	}
        });
        pageNum = data.resultRow;
        $("#getPersonalResume").html(strs);
        //wrapper.refresh();
    } else {
    	msg_Alert("Resume submitted","Data acquisition failed");
    }
},function () {
    
});

}

//Go to details page
function open_details(jobId){
window.location.href="/zp/happ/postDetails/postDetails.html?jobId="+jobId;
}

3. Common base.js, which encapsulates some common methods
var default_path="/zp";

/**

• Public window method
• @param title
• @param msg
  */
  function msg_Alert(title,msg,fu) {
  $.MsgBox.Alert(title, msg,fu);
  }
  function msg_Confirm(title,msg,fu) {
  $.MsgBox.Confirm(title, msg,fu);
  }

function stringify(object){
var string = JSON.stringify(object);
return string.replace(/\u([0-9a-fA-F]{2,4})/g,function(string,matched){
return String.fromCharCode(parseInt(matched,16))
})
}

jQuery.extend( {
/**ajax json public methods
*url: the url of the form submission
*reqdata: data submitted by the form
*Sucescallback: successful callback function;
*errorcallback: failed callback function;
*/
tgajax : function(url,reqdata,sucesscallback,errorcallback){
var data1={};
data1.para=stringify(reqdata);
$.ajax({
url: default_path+url,
data:reqdata,
type: "POST",
dataType: "json",
}).done(function(data){
if(data.resultCode=="9999"){
msg_Alert("", "your login has timed out, please login again", function (){
window.location='/zp/happ/applogin.html';
});
}else{
sucesscallback(data);
}
}).fail(function(err){
errorcallback(err);
});
},

/**
 * Cross domain AJAX requests jsonp
 *  url: url of form submission
 *  reqdata: Data submitted by form
 *  sucesscallback: Successful callback function;
 *  errorcallback: Failed callback function;
 */
ajaxJsonp : function(url,reqdata,sucesscallback,errorcallback){
    var data1={};
    data1.para=stringify(reqdata);
    $.ajax({
        async: false,
        cache: false,
        url: rs_url+url,
        data:data1,
        type: "GET",
        dataType: "jsonp",
        jsonp: "jsonCallBack",
        jsonpCallback : "pc_jsonp",
        timeout: 5000
    }).done(function(data){
        sucesscallback(data)
    }).fail(function(err){
        errorcallback(err)
    });
}

});
//Get html parameter method
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}

function openUrl(url) {
Ceshi.openUrl(url);
}
function wdl(code) {
if(code=="9999"){
msg_Alert("", "your login has timed out, please login again", function (){
window.location='/zp/happ/applogin.html';
});
}
}

function isEmpty(val){
if(val == null || val == undefined || val == ""){
return true;
}else{
return false;
}
}

4. Corresponding controller method
@RequestMapping("/getAllFavoriteById")
@ResponseBody
public Result getAllFavoriteById(HttpServletRequest request, HttpServletResponse response, Model model){
HttpSession session = request.getSession();
Applicant applicant =(Applicant)session.getAttribute("userHapp");
String u_id = applicant.getMaxaccept();

	Result result = new Result();
	result.setResultCode("0000");
	result.setResultMsg("Operation succeeded!");
	try {
		Map<String, Object> param = new HashMap<String, Object>();
		param.put("u_id", u_id);
		param.put("public_status", "1");
		List<Map<String, String>> doctorInfo = personalService.getAllFavoriteById(param);
		result.setResultData(doctorInfo);
	}catch  (Exception e){
		logger.error(e.getMessage(),e);
		result.setResultCode("0009");
		result.setResultMsg("System exception!");
	}
	return result;
}