大家好，今天鐵柱兄給大家帶一段jquery ajax提交資料給后端的教學，
初學javaweb的同學前端提交資料基本上都是用form表單提交，這玩意兒反正我是覺得不太好玩，而JavaScript ajax寫一大堆，看著都頭痛，jquery ajax簡單易懂容易學，
廢話不多說，上教程~
新建一個Web專案，在\WebContent下新建一個index.jsp
新建之后不用慌，默認的jsp編碼得改一下，我這邊統一改成UTF-8：
搞定之后我們直接引入jquery的js檔案，因為我們村通網路了，我就不想直接下載js了：
直接引入js的網上路徑：<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
簡簡單單，明明白白，寫兩個輸入框：
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<input type="text" id="userName"/>
<input type="text" id="password"/>
<a onclick="btnConfirm()">點我提交</a>//點擊事件
</body>
</html>
其實這里我還是想直接截圖的，但是害怕你們噴我“啥作者，只會發圖片”，但是這里確實沒啥好復制的，廢話不多說，咱們繼續，
寫完這里之后，先不急著寫js，咱們先把后臺怎么接收的給寫上，哈哈哈，又要發圖片了
package com.tiezhu.action; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet(name="LoginServlet",urlPatterns="/login") public class LoginServlet extends HttpServlet{ /** * */ private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub super.doGet(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { } }
好了，搞定java類，咱們回到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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <title>Insert title here</title> </head> <body> <input type="text" id="userName"/> <input type="text" id="password"/> <a onclick="btnConfirm()">點我提交</a> <script type="text/javascript"> function btnConfirm(){//a標簽中的點擊事件 var userName=$("#userName").val();//通過id獲取輸入框中用戶輸入的值 var password=$("#password").val(); $.ajax({ type : 'post', url : '${pageContext.request.contextPath}/login', //這里的/login對應LoginServlet類中注解的urlPatterns="/login" data:{'userName':userName,'password':password}, traditional : true, async : false, dataType: 'json', success : function(data){//成功的事件 alert("鐵柱兄真帥"); }, error : function(data){//失敗的事件 alert("你個衰仔！"); } }); } </script> </body> </html>
現在基本上就ok啦，ajax里的各種動作我就不一一解說啦，百度里面一大把哦，其實也不用知道是啥意思，能搞定用就好了，
現在我們再去LoginServlet類里去寫接收
package com.tiezhu.action; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet(name="LoginServlet",urlPatterns="/login") public class LoginServlet extends HttpServlet{ /** * */ private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub super.doGet(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String userName=req.getParameter("userName"); String password=req.getParameter("password"); System.out.println("接收到前端傳來的資料：userName="+userName+"password="+password); } }
這樣基本上沒啥毛病了，我們把專案跑起來試一下
OK，后端能正常接收到前端傳來的值了，（那為啥還說我是個衰仔？）
因為后端只接收了值，但是沒告訴ajax現在是啥情況，我們得回傳點東西給ajax，告訴它我們這邊一切正常，
resp.getWriter().write("666");隨便回傳點東西給前端，只要有回傳，ajax就知道你還活著了，
再跑一次~
好了，本次就到這里啦，有什么不懂的歡迎評論區討論~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/28097.html
標籤：jQuery
下一篇：jQuery隨筆記錄