SSM+AJAX整合難點，易錯點總結
阿新 • • 發佈：2019-02-04
1.靜態資源訪問問題
如果想通過jsp檔案跳轉到某個特定的html或者jsp檔案(比如網站首頁僅僅是展示一些靜態的宣傳資訊，沒有涉及到後臺邏輯互動)，可以設定這些特定的html或jsp檔案與某資料夾中，然後在spring-mvc.xml配置檔案中將該資料夾設定靜態訪問就可以直接跳轉到想要跳轉的頁面，如下
<!-- 靜態資源訪問-->
<mvc:resources location="/normal/" mapping="/normal/**" />(當然不閒麻煩的同學可以使用老方法跳轉到controller檔案中進行設定然後進行頁面的跳轉)
2.逆向工程相關問題
配置generatorConfig.xml檔案後，倘若Mysql中某些成員屬性(型別，名稱等)發生變化後，Maven構建之前，一定要將之間各實體對應的Mapper.xml檔案刪除，防止多次自動構建的程式碼產生在同一個檔案中(不刪除會預設在後面續加)，影響後續修改。
3.實時數字驗證碼問題
想要前臺點選按鈕進行驗證碼生成操作，可以通過ajax技術進行操作，如下對獲取驗證碼按鈕設定點選事件：
function sendCode(obj){ var phone = document.getElementById("phone"); var value = phone.value.trim(); if(value && value.length == 11){ $.ajax({ type : "POST", cache : false, url : "/user/getCode", data : {phone : value} }); // 1分鐘內禁止點選 for (var i = 1; i <= 60; i++) { // 1秒後顯示 window.setTimeout("updateTime(" + (60 - i) + ")", i * 1000); } }else{ alert("請輸入正確的手機號碼"); phone.focus(); } alert("驗證碼已傳送，請檢視！") }
將請求傳送到後臺/user/getCode action中，然後action進行生成驗證碼操作，同時設定屬性值(生成的驗證碼)，以便使用者點選註冊按鈕時，下個邏輯能進行驗證碼判斷，相關的兩個action如下:
//獲取驗證碼 @RequestMapping(value = "/getCode") public ModelAndView getCode(HttpServletRequest httpServletRequest){ String url = httpServletRequest.getHeader("Referer"); String tel = httpServletRequest.getParameter("phone"); ModelAndView mod = new ModelAndView(); System.out.println("tel:"+tel); //send.code(tel); sendMsg s = new sendMsg(); //以下程式碼可以在有簡訊功能後進行刪除 int code2 = s.postCode(); //產生驗證碼 System.out.println("驗證碼是-------------:"+code2); httpServletRequest.getSession().setAttribute("buildCode",code2); mod.addObject("buildCode",code2); mod.setViewName("index"); return mod; }
當用戶點選註冊按鈕時，調入如下action，在這裡進行 驗證碼的檢驗
//新增使用者
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest httpServletRequest, @ModelAttribute("user")User user1){
/*
* 只是此處多了一個註解@ModelAttribute("user")，
* 它的作用是將該繫結的命令物件以“user”為名稱新增到模型物件中供檢視頁面展示使用。
* 我們此時可以在檢視頁面使用${user.username}來獲取繫結的命令物件的屬性。
* */
String url = httpServletRequest.getHeader("Referer"); //獲取來源網頁後文件資訊。便於後續重定向
User user = userService.getUserByPhone(user1.getUtelephone());
if(user==null){
String userInput = httpServletRequest.getParameter("inputCode"); //使用者輸入的
String buildCode = httpServletRequest.getSession().getAttribute("buildCode").toString();
System.out.println("verifyCode:"+userInput);
System.out.println("resultCode:"+buildCode);
if(userInput.equals(buildCode)){
userService.addUser(user1);
System.out.println("新增成功");
}
else{
System.out.println("驗證碼不相符:");
}
}
return "redirect:"+url;
}4.bootstrap fileinput.css相關問題
剛開始開發的時候，在圖片新增處，一些相應的按鈕圖片顯示不出來，最後查出的原因是之前呼叫的bootstrap內容不全，於是換了bootstrap相應的地址就成功了，有關檔案連結如下：
<link rel="stylesheet" href="../css/font-awesome.min.css" />
<!-- jquery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- bootstrap -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet"
href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-select.css" />
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<link rel="stylesheet" href="../css/Releasethings.css" />
<!-- 圖片上傳即使預覽外掛 -->
<link rel="stylesheet" href="../css/fileinput.min.css" />
<script type="text/javascript" src="../js/fileinput.min.js"></script>
<script type="text/javascript" src="../js/zh.js"></script>5.ajax傳遞資料從一個jsp頁面調到另一個jsp頁面有關問題
開始書寫的時候，直接將ajax的url直接連結到相關操作的action中，結果並不能直接通過action跳到指定的頁面，因為ajax請求過去，返回給你的是一個值，不是一個頁面，即使你後臺返回的是一個頁面ajax也當字串返回，所以跳不了頁面，你可以在ajax的回撥函式中進行頁面跳轉的操作，試了其中一位答主的方法，果然成了，相應的文章連結點選開啟連結，我做的是類似與京東，淘寶的那種篩選操作，因此定義了不少東西，相應的程式碼如下：
JSP程式碼：
<div class="container" style="background: #fff;padding: 2em;">
<div id="ConditionRetrieval" style="margin-left: 20% ">
<div class="row">
<ul class="simplefilter1">
選擇釋出時間：
<li value="0"><a href="#">不限</a></li>
<li value="1"><a href="#">一天之內</a></li>
<li value="2"><a href="#">三天之內</a></li>
<li value="3"><a href="#">一週之內</a></li>
<li value="4"><a href="#">兩週之內</a></li>
<li value="5"><a href="#">一個月之內</a></li>
<li value="6"><a href="#">一個月之上</a></li>
</ul>
</div>
<div class="row">
<ul class="simplefilter2">
丟 失 地 點 ：
<li value="0"><a href="#">不限</a></li>
<li value="1"><a href="#">宿舍區</a></li>
<li value="2"><a href="#">教學樓</a></li>
<li value="3"><a href="#">餐廳</a></li>
<li value="4"><a href="#">操場</a></li>
<li value="5"><a href="#">圖書館</a></li>
<li value="6"><a href="#">校園周邊</a></li>
</ul>
</div>
<div class="row">
<ul class="simplefilter3">
物 品 類 別 ：
<li value="0"><a href="#">不限</a></li>
<li value="1"><a href="#">手機/充電寶</a></li>
<li value="2"><a href="#">書籍/眼睛</a></li>
<li value="3"><a href="#">卡類</a></li>
<li value="4"><a href="#">鑰匙/U盤</a></li>
<li value="5"><a href="#">學習用品</a></li>
<li value="6"><a href="#">傘/衣服</a></li>
<li value="7"><a href="#">其他</a></li>
</ul>
</div>
</div>
<!--條件篩選-->ajax程式碼：
<script>
$(function () {
//定義3個變數用來存取狀態值
var time =0;
var place = 0;
var catelog = 0;
var result = 0;
$('.simplefilter1 li').click(function() {
time = $(this).val();
result = time+":"+place+":"+catelog;
$.ajax({
type : "get",
cache : false,
url : "/thing/complexValue",
data : {ttime : time,taddress:place,cid:catelog},
dataType:"json",
success:function (data) {
var json_data = JSON.stringify(data); //系列化物件(把資料轉換成字串型別)
window.location.href= "/thing/searchComplex?aa="+json_data;
}
});
});
$('.simplefilter2 li').click(function () {
place = $(this).val();
result = time+":"+place+":"+catelog;
$.ajax({
type : "get",
cache : false,
url : "/thing/complexValue",
data : {ttime : time,taddress:place,cid:catelog},
dataType:"json",
success:function (data) {
var json_data = JSON.stringify(data); //系列化物件(把資料轉換成字串型別)
window.location.href= "/thing/searchComplex?aa="+json_data;
}
});
});
$('.simplefilter3 li').click(function () {
catelog = $(this).val();
result = time+":"+place+":"+catelog;
$.ajax({
type : "get",
cache : false,
url : "/thing/complexValue",
data : {ttime : time,taddress:place,cid:catelog},
dataType:"json",
success:function (data) {
var json_data = JSON.stringify(data); //系列化物件(把資料轉換成字串型別)
window.location.href= "/thing/searchComplex?aa="+json_data;
}
});
});
})
</script>相應的action程式碼(分為兩部分):
@ResponseBody
@RequestMapping(value = "/complexValue")
public String complexValue(String ttime,String taddress,Integer cid){
Map<String,Object> map = new HashMap<String,Object>();
map.put("inputTime",ttime);
map.put("inputPlace",taddress);
map.put("inputCatelog",cid);
return JSON.toJSONString(map);
} @RequestMapping("/searchComplex")
public String searchComplex(String aa,Model model, Thing thing) throws Exception{
JSONObject jsonObject = JSON.parseObject(aa); //解析物件
String inputTime = jsonObject.getString("inputTime");
String inputPlace =jsonObject.getString("inputPlace");
int inputCatelog = jsonObject.getInteger("inputCatelog");
Set<ThingsExtend> set = new HashSet<ThingsExtend>();
if(inputCatelog==0&&!inputTime.equals("0")&&!inputPlace.equals("0")){
List<Thing> Bytime = thingService.getThingsByTime(inputTime);
List<Thing> ByPlace = thingService.getThingsByPlace(inputPlace);
System.out.println("分類為0,其他不為0");
for(int i=0;i<Bytime.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing time = Bytime.get(i);
List<Image> imageTime = imageService.getImageByPrimaryKey(time.getTid());
thingsExtend.setThing(time);
thingsExtend.setImage(imageTime);
set.add(thingsExtend);
}
for(int i=0;i<ByPlace.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing place = ByPlace.get(i);
List<Image> imagePlace = imageService.getImageByPrimaryKey(place.getTid());
thingsExtend.setThing(place);
thingsExtend.setImage(imagePlace);
set.add(thingsExtend);
}
}
if(inputPlace.equals("0")&&inputCatelog!=0&&!inputTime.equals("0")){
List<Thing> Bytime = thingService.getThingsByTime(inputTime);
List<Thing> ByCatelog = thingService.getThingsByCatelog(inputCatelog);
System.out.println("地點為0,其他不為0");
for(int i=0;i<Bytime.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing time = Bytime.get(i);
List<Image> imageTime = imageService.getImageByPrimaryKey(time.getTid());
thingsExtend.setThing(time);
thingsExtend.setImage(imageTime);
set.add(thingsExtend);
}
for(int i=0;i<ByCatelog.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing catelog = ByCatelog.get(i);
List<Image> imageCatelog = imageService.getImageByPrimaryKey(catelog.getTid());
thingsExtend.setThing(catelog);
thingsExtend.setImage(imageCatelog);
set.add(thingsExtend);
}
}
if(inputTime.equals("0")&&inputCatelog!=0&&!inputPlace.equals("0")){
List<Thing> ByPlace = thingService.getThingsByPlace(inputPlace);
List<Thing> ByCatelog = thingService.getThingsByCatelog(inputCatelog);
System.out.println("時間為0,其他不為0");
for(int i=0;i<ByPlace.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing place = ByPlace.get(i);
List<Image> imagePlace = imageService.getImageByPrimaryKey(place.getTid());
thingsExtend.setThing(place);
thingsExtend.setImage(imagePlace);
set.add(thingsExtend);
}
for(int i=0;i<ByCatelog.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing catelog = ByCatelog.get(i);
List<Image> imageCatelog = imageService.getImageByPrimaryKey(catelog.getTid());
thingsExtend.setThing(catelog);
thingsExtend.setImage(imageCatelog);
set.add(thingsExtend);
}
}
if(inputCatelog==0&&inputPlace.equals("0")){
List<Thing> Bytime = thingService.getThingsByTime(inputTime);
System.out.println("分類,地點為0");
for(int i=0;i<Bytime.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing time = Bytime.get(i);
List<Image> imageTime = imageService.getImageByPrimaryKey(time.getTid());
thingsExtend.setThing(time);
thingsExtend.setImage(imageTime);
set.add(thingsExtend);
}
}
if(inputTime.equals("0")&&inputCatelog==0){
List<Thing> ByPlace = thingService.getThingsByPlace(inputPlace);
System.out.println("時間,分類為0");
for(int i=0;i<ByPlace.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing place = ByPlace.get(i);
List<Image> imageTime = imageService.getImageByPrimaryKey(place.getTid());
thingsExtend.setThing(place);
thingsExtend.setImage(imageTime);
set.add(thingsExtend);
}
}
if(inputCatelog==0&&inputTime.equals("0")){
List<Thing> ByPlace = thingService.getThingsByPlace(inputPlace);
for(int i=0;i<ByPlace.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing place = ByPlace.get(i);
List<Image> imagePlace = imageService.getImageByPrimaryKey(place.getTid());
thingsExtend.setThing(place);
thingsExtend.setImage(imagePlace);
set.add(thingsExtend);
}
}
if(inputTime.equals("0")&&inputPlace.equals("0")){
List<Thing> ByCatelog = thingService.getThingsByCatelog(inputCatelog);
System.out.println("時間,地點為0");
for(int i=0;i<ByCatelog.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing catelog = ByCatelog.get(i);
List<Image> imageCatelog = imageService.getImageByPrimaryKey(catelog.getTid());
thingsExtend.setThing(catelog);
thingsExtend.setImage(imageCatelog);
set.add(thingsExtend);
}
}
if(inputCatelog==0&&inputPlace.equals("0")&&inputTime.equals("0")) {
System.out.println("都為0");
List<ThingsExtend> thingsAndImage = new ArrayList<ThingsExtend>();
List<Thing> thingsList = thingService.selectAllThings();
for (int i = 0; i < thingsList.size(); i++) {
//將使用者資訊和image資訊封裝到GoodsExtend類中，傳給前臺
ThingsExtend thingsExtend = new ThingsExtend();
Thing thingss = thingsList.get(i); //獲取商品
List<Image> image = imageService.getImageByPrimaryKey(thingss.getTid());
thingsExtend.setImage(image);
thingsExtend.setThing(thingss);
thingsAndImage.add(i, thingsExtend);
set.add(thingsExtend);
}
}
if(inputCatelog!=0&&!inputPlace.equals("0")&&!inputTime.equals("0")){
List<Thing> Bytime = thingService.getThingsByTime(inputTime);
List<Thing> ByPlace = thingService.getThingsByPlace(inputPlace);
List<Thing> ByCatelog = thingService.getThingsByCatelog(inputCatelog);
System.out.println("都不為0");
for(int i=0;i<Bytime.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing time = Bytime.get(i);
List<Image> imageTime = imageService.getImageByPrimaryKey(time.getTid());
thingsExtend.setThing(time);
thingsExtend.setImage(imageTime);
set.add(thingsExtend);
}
for(int i=0;i<ByPlace.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing place = ByPlace.get(i);
List<Image> imagePlace = imageService.getImageByPrimaryKey(place.getTid());
thingsExtend.setThing(place);
thingsExtend.setImage(imagePlace);
set.add(thingsExtend);
}
for(int i=0;i<ByCatelog.size();i++){
ThingsExtend thingsExtend = new ThingsExtend();
Thing catelog = ByCatelog.get(i);
List<Image> imageCatelog = imageService.getImageByPrimaryKey(catelog.getTid());
thingsExtend.setThing(catelog);
thingsExtend.setImage(imageCatelog);
set.add(thingsExtend);
}
}
model.addAttribute("thingSet",set);
model.addAttribute("catelogId",inputCatelog);
model.addAttribute("placeId",inputPlace);
model.addAttribute("timeId",inputTime);
return "thing/searchByDetail";
}上面第二部分程式碼，是實在沒辦法才這樣寫的，
因為我不太會寫複雜的sql查詢語句，而且這樣雖然書寫程式碼很多，但是邏輯比較清楚，如果有朋友這塊有更好的方法希望可以告訴我一下！謝謝你。