如何建立微網(wǎng)站詳細(xì)seo優(yōu)化操作
昨天在做 ajax 申請(qǐng)鏈接提交表單的時(shí)候，發(fā)現(xiàn)提交了兩次，Debug 的時(shí)候，也能發(fā)現(xiàn)控制器會(huì)執(zhí)行兩次。當(dāng)然，數(shù)據(jù)庫(kù)里也是兩條數(shù)據(jù)。然后今天起來(lái)，修改了一下，結(jié)果出現(xiàn)了中文亂碼情況，原因是多次解碼，這里大家可以百度?serialize 相關(guān)信息。
最終整理了一下代碼，能夠完美實(shí)現(xiàn)要求。不刷新提交表單，只提交一次，中文不亂嗎。
代碼如下
html 部分
- <form?id="apply_link_form">
- ??????<input?type="text"?name="link_name"?id="link_name"?placeholder="如:言曌博客"?required="required">
- ???????<input?type="text"?name="link_url"?id="link_url"?placeholder="如:https://liuyanzhao.com"?required="required">
- ???????<input?type="text"?name="link_description"?id="link_description"?placeholder="如:一個(gè)后端開(kāi)發(fā)者的成長(zhǎng)筆記"?>
- ???????<input?type="text"?name="link_owner_contact"?id="link_owner_contact"?placeholder="如:郵箱service@liuyanzhao.com"?required="required">
- ???????<input?id="submit"?name="submit"?type="submit"?value="提交申請(qǐng)"?>
- ????????<
- </form>
注意：form 標(biāo)簽只填一個(gè) id 即可，不用填 action 和 method
?
js 部分
- //ajax提交信息
- ????$("#apply_link_form").submit(function(){
- ????????parent.layer.close(index);?//再執(zhí)行關(guān)閉
- ????????$.ajax({
- ????????????async:?false,
- ????????????type:?"POST",
- ????????????url:'${pageContext.request.contextPath}/link/apply',
- ????????????contentType?:?"application/x-www-form-urlencoded;?charset=utf-8",
- ????????????data:$("#apply_link_form").serialize(),
- ????????????dataType:?"text",
- ????????????success:?function?()?{
- ??????????????},
- ????????????error:?function?()?{
- ????????????}
- ????????})
- ????})
注意：第9行填 data:$("#formid").serialize() 最終數(shù)據(jù)是 name=tom&pass=123456 之類的
?
?
控制器代碼
- @RequestMapping(value?=?"link/apply",method?=?{RequestMethod.POST})
- @ResponseBody
- public?void?applyLink(HttpServletRequest?request)?throws?Exception?{
- ????String?linkName?=?request.getParameter("link_name");;
- ????String?linkUrl?=?request.getParameter("link_url");
- ????String?linkDescription?=?request.getParameter("link_description");
- ????String?linkOwnerContact?=?request.getParameter("link_owner_contact");
- ????LinkCustom?linkCustom?=?new?LinkCustom();
- ????linkCustom.setLinkName(linkName);
- ????linkCustom.setLinkUrl(linkUrl);
- ????linkCustom.setLinkDescription(linkDescription);
- ????linkCustom.setLinkOwnerContact(linkOwnerContact);
- ????linkCustom.setLinkStatus((byte)?0);
- ????linkCustom.setLinkCreateTime(new?Date());
- ????linkCustom.setLinkUpdateTime(new?Date());
- ????linkService.applyLink(linkCustom);
- }
?
效果圖如下
?
查看數(shù)據(jù)表，已添加了一條數(shù)據(jù)
?
本文鏈接：https://liuyanzhao.com/6193.html