Junior interns write requirements (mental journey) -- Ajax asynchronous value transfer at the front end and data acceptance at the back end (get submission method)

ZHzh 2021-09-15 10:51:18

ZH It's a junior intern (java Development ), After coming to the company for a month, I finally began to write requirements ~ Lacrimal , Ha ha ha ! As for what happened in the past ten or twenty days , Don't ask , Asking is learning to be familiar with the project ( Surfing ), Hey ~

front end ajax Asynchronously passing values and receiving data at the back end (get submission ) Put your writing at the end , If you need it, you can pull it down and have a look (ZH I don't think there's any programmer better than myself )

As for this small demand ,ZH It took a day to finish , Oh dear , It feels like a simple task , It still took so much time , And I spend most of my time checking things , The road to learning is heavy and long ~

Specifically, move the mouse to “ Customer portrait ” Upper time , Modify the called number entered for query , The pop-up window shows .

9.8-1.jpeg

Get this demand , First from git Let's get this project down , Run , No problem . then ZH The first idea is to search this “ Customer portrait ”, First search the front-end code page, and then find its interface from it , And then a search , Good. I didn't find it ~ Then search “ Called number ”, Found several , A simple comparison , Still found the corresponding page . But this “ Customer screen ” What is it , Why can't you find it , With questions ,ZH Browse this html code page . good heavens ~ I really didn't find it the first time ,ZH Fall into thinking , Thinking that this thing should be in front “ Outbound ”“ Hang up ” Back , Then I saw this thing 9.8-3.png 9.8-2.jpeg Sure enough , It's a picture ...

then ZH Just command+f Searched his id, That is to say “userInfoIframe”, The operations involved are as follows

function getUserInfoDetailNew(){
if(userInfoQryOkNew == undefined || userInfoQryOkNew == null || userInfoQryOkNew == ""){
var config = {
url: 'common/openUserInfo',
type: 'get',
dataType: "json",
beforeSend: function () {
$.modal.loading(" Querying user details , Please later ...");
},
success: function (result) {
console.log(result);
if (result.code == web_status.SUCCESS) {
$("#userInfoIframe").attr("src", result.data);
// $("#userInfoIframe").show();
userInfoQryOkNew="1";
} else {
}
},
error: function (arg1) {
console.log(arg1)
},
complete: function () {
$.modal.closeLoading();
}
};
$.ajax(config);
}
}
$("#userDiv").hover(function(){
getUserInfoDetailNew();
$("#userInfoIframe").show();
},function() {
userInfoQryOkNew="";
$("#userInfoIframe").hide();
});
 Copy code 

You can see the interface here common/openUserInfo , Go to this controller layer , Let's figure out his logic first

But it's a pity ,ZH The front-end level of is really not satisfactory ( When I studied before, I focused on the back end ), So there are some things on this page that I can't understand .ajax Asynchronous refresh knows , But some of the details are still unclear , Then began to develop for Baidu ~

I found two things I didn't know ,attr() Function and the following hover() function , Then what shall I do? , Check it out . 9.8-6.jpg hover(over,out)
A simulated hover event ( Move the mouse over and out of an object ) Methods . This is a custom method , It provides a way for frequently used tasks to “ Stay in it ” The state of .
When the mouse moves over a matching element , Will trigger the first function specified . When the mouse moves out of this element , Will trigger the specified second function . and , It will be accompanied by the detection of whether the mouse is still in a specific element ( for example , be in div Image in ), If it is , Will continue to “ hover ” state , Without triggering the move out event ( Fixed use mouseout A common error in events ).


I know it now. ~ Move the mouse to “ Customer portrait ” when , Trigger getUserInfoDetailNew(), Conduct ajax asynchronous communication , Move out and close the pop-up window . Then go to controller layer

try {
String sign = getShaSign(content, JSON.toJSONString(content_param));
log.info(" digital signature :" + sign);
// String url = authCodeUrl + "?" + content + "&sign=" + sign;
String url = authCodeUrl.concat("?").concat(content).concat("&sign=").concat(sign);
log.info("url:" + url);
String return_msg = HttpUtils.doPostForJson(url, JSONObject.toJSONString(content_param));
log.info(" Interface returns information :" + return_msg);
if(StringUtils.isEmpty(return_msg)){
log.info(" The information returned by the interface is null , Call interface :" + url);
}else{
Map rntMsg = JSON.parseObject(return_msg);
if ("200".equals(rntMsg.get("code").toString())) {
log.info(" Interface returns information :" + rntMsg.get("msg").toString());
String data = rntMsg.get("data").toString();
data = URLEncoder.encode(data,"utf-8");
String portraitUrl = DetainConfig.getPortraitUrl().concat("?token=").concat(data).concat("&svc_num=").concat(phoneNumber);
log.info("url:" + portraitUrl);
return AjaxResult.success(" success ",portraitUrl);
} else if ("1".equals(rntMsg.get("code").toString())) {
log.info(" Interface returns information :" + rntMsg.get("msg").toString());
return AjaxResult.success(" Failure ",rntMsg.get("msg").toString());
}
}
} catch (Exception e) {
e.printStackTrace();
}
 Copy code 

It is found that the information obtained now is the administrator's information (content_param), The code is basically splicing one url And some logs log Output , The front pop-up page is based on this url To search the , therefore ZH Just replace the telephone number spliced at the end with the called number input at the front end ~

9.8-8.jpg

So here's the problem , How to return this value to the back end , If you don't know, check ! Hey ~

Here is ZH Where it took the longest , Because I haven't written much ajax Asynchronous front end and back end interaction , So I didn't notice here at first “get” submission , Write down the methods found , The back end always gets a null value , Then it was more biased by Baidu , Because it is found that the null value is a mismatch between the front and back data types , direct “ fall into a wrong path ”···

not so bad ZH“ Talented and intelligent ”(sb), After being confused for a while , Found this “get” How to submit , And then very soon , ha-ha ~


1. adopt get submission , To pass parameters in the form of question marks in the link .

9.8-9.jpg

2. Back end code @RequestParam("userNumber") Is essential , Because he specifies the parameter name in the link

9.8-10.jpg


Finally, splice the transmitted number into url Just inside ~ Test it ~

9.8-11.jpg

success ! Hey ~

ZH He is a novice intern programmer , I hope I can get the “ care ”, This blog post records a journey of writing needs , as well as ZH What did you learn from it , I want to share with you ~ If the elders have time to see here , Give me a compliment and give me some advice ZH For a while. ,ZH Thank you very much ~

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15