前后端交互技术之servlet与form表单提交请求及ajax提交请求

时间:2021-01-23 17:44:45

1.先来个简单的form表单 login.jsp,建在webcontent目录下(url写相对路径就可以了)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="login">
账号:<input type = "text" name = "username"><br>
密码:<input type = "text" name = "psaaword"><br>
<input type = "submit" value = "登录">
</form>

</body>
</html>

2.ajax提交数据(url写相对路径就可以了)

$("#btn").on("click",function(){
    sqlStatement = document.getElementById("sqlStatement").value;
    $.ajax({
        type: "GET",
        url : "login",
        dataType:"text",
        async: false,
        data:{sql: sqlStatement, pCount:pageCount},
        success: function(resultData){
            jObject = JSON.parse(resultData);
            document.getElementById("result").innerHTML = jObject.table;
        },
        error:function(xhr, status, errMsg){
            alert("Data transmission failed!");
        }
    });

3..建个login的servlet. eclipse创建的话直接右键项目,new-->servlet-->填写具体信息

前后端交互技术之servlet与form表单提交请求及ajax提交请求

前后端交互技术之servlet与form表单提交请求及ajax提交请求

package com.tcc;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class loginServlet
*/
public class loginServlet extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("username");
String password = request.getParameter("psaaword");
System.out.println("username"+name);
System.out.println("psaaword"+password);

自己去写逻辑处理,爱干嘛干嘛

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}

}