jquery ajax提交數據給後端

時間 2019-11-29

標籤 jquery ajax 提交數據後端欄目 JQuery 简体版

原文原文鏈接

你們好，今天鐵柱兄給你們帶一段jquery ajax提交數據給後端的教學。javascript

初學javaweb的同窗前端提交數據基本上都是用form表單提交，這玩意兒反正我是以爲不太好玩。而JavaScript ajax寫一大堆，看着都頭痛。jquery ajax簡單易懂容易學。html

　　廢話很少說，上教程~前端

新建一個Web項目，在\WebContent下新建一個index.jspjava

新建以後不用慌，默認的jsp編碼得改一下，我這邊統一改爲UTF-8：jquery

搞定以後咱們直接引入jquery的js文件，由於咱們村通網絡了，我就不想直接下載js了：web

直接引入js的網上路徑：<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>ajax

簡簡單單，明明白白，寫兩個輸入框：json

<%@ 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);
    }
    
    

}