ajax前後臺數據簡單互動（ssm）
阿新 • • 發佈：2019-01-02
第一次開始寫部落格 主要是為了自己得積累和剛剛入行初學者方便！有什麼不好得地方請多多指教！
好了那麼咱們開始來講講ajxa簡單得前後端互動
首先咱們先把需要得架包匯入！
https://pan.baidu.com/s/1p9J6tbMF9uLp9RzQXDAC7g
https://pan.baidu.com/s/1NVuxYB2rN_8wcQ9B_Wb47Q（js的 為了一些剛剛入門得方便 ＝ ＝對啦ｊｓ路徑錯了會沒有效果！新手謹記）
閒話不多少了直接貼程式碼啦！！
這裡就是所有得jsp程式碼！<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ZERO</title> </head> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#regist").bind('click',register); }); function register(){ var name = $("#name").attr('value'); var password = $("#password").attr('value'); var repassword = $("#repassword").attr('value'); if(validate(name,password,repassword)){ $.ajax({ url: "ajaxdemo", dataType : "json", type: "post", data: {"name":name,"password":password}, success:function(data){ alert(data.demo); }, error: function() { alert("ajax執行失敗"); } }); } } /* 驗證方法 */ function validate(name,password,repassword){ if(name==null || name==''){ alert('使用者名稱不能為空！'); $("#name").focus(); return false; } if(password==null || password==''){ alert('密碼不能為空！'); $("#password").focus(); return false; } if(repassword==null || repassword==''){ alert('確認密碼不能為空！'); $("#repassword").focus(); return false; }else if(password != repassword){ alert('兩次密碼輸入不一致！'); $("#repassword").focus(); return false; } return true; } </script> <style type="text/css"> .demo {width:250px;height:40px;display:none; } </style> <body> <div id="content"> <table> <tr> <td>用 戶 名：</td> <td> <input type="text" name="name" id="name" /> </td> </tr> <tr> <td>密 碼：</td> <td> <input type="password" name="password" id="password"/> </td> </tr> <tr> <td>確認密碼：</td> <td> <input type="password" name="repassword" id="repassword"/> </td> </tr> <tr> <td colspan="2" align="CENTER"> <BR><input type="button" id="regist" value="註冊"/> </td> </tr> </table> </div> </body> </html>
程式碼給全點也方便看點！
java得程式碼我就貼用到得部分！因為控制層內部東西有點多！
@ResponseBody @RequestMapping(value = "ajaxdemo" , method = RequestMethod.POST) public JSONObject ajaxdemo(HttpServletRequest req){ // System.out.println(name); JSONObject jsonObject = new JSONObject(); jsonObject.put("demo", "demo"); System.out.println("-----"); String parameter = req.getParameter("name"); System.out.println(parameter); String parameter2 = req.getParameter("password"); System.out.println(parameter2); return jsonObject; }
這是用Request去接收資料還有一種接收 用
@RequestBodyjsp頁面還是可以用那個不會出問題只不過接收得資料是拼接起來得
@ResponseBody @RequestMapping(value = "ajaxdemo" , method = RequestMethod.POST) public JSONObject ajaxdemo(@RequestBody String req){ System.out.println(req); JSONObject jsonObject = new JSONObject(); jsonObject.put("demo", "demo"); System.out.println("-----"); // String parameter = req.getParameter("name"); // System.out.println(parameter); // String parameter2 = req.getParameter("password"); // System.out.println(parameter2); return jsonObject; }
以上！就是簡單得ajax得簡單得互動！！歡迎大家給我指出！