将数据从 Javascript 发送到 Servlet 的问题

Question

我有一个 html 文件，我在其中提交表单以注册用户。表单将由后端servlet 接收。但在此之前，注册将通过Firebase进行，一旦完成，表单数据需要传输到servlet。

下面是我的表格。

<form id="register-form" class="form" action="" method="post">
   <div class="form-group row">
      <input type="text" id="name" name="name" class="form-control" placeholder="Name">
   </div>
   <div class="form-group row">
      <input type="text" id="address" name="address" class="form-control" placeholder="Address">
   </div>
   <div class="form-group row">
      <input type="number" id="phone" name="phone" class="form-control" placeholder="Phone">
   </div>
   <div class="form-group row">
      <input type="email" id="email" name="email" class="form-control" placeholder="Email">
   </div>
   <div class="form-group row">
      <input type="password" id="password" name="password" class="form-control" placeholder="Password">
   </div>
   <div class="form-group row">
      <input type="text" id="language" name="language" class="form-control" placeholder="Language">
   </div>
   <div class="form-group row">
      <button type="button" class="btn btn-primary green max round" onClick="registerUser()">Create Account</button>
   </div>
</form>

下面是javascript代码

<script >

    function registerUser() {
        alert("hi");
        var email = "someone1@example.com";
        var password = "password";
        //Create User with Email and Password
        firebase.auth().createUserWithEmailAndPassword(email, password).then(function(user) {
            var user = firebase.auth().currentUser;
            alert(user.email); // Optional


            var email = firebase.auth().currentUser.email;
            var name = document.getElementById("name").value;
                //alert(email);
                // console.log(email) contains email
                const options = {
                    method: 'POST',
                    url: 'Register',
                    headers: {
                        // set appropriate headers, assuming json here
                        //"Content-Type": "application/json",
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    // form body, assuming json
                    //body: JSON.stringify(email)
                    body: `email=${email};name=${name}`
                }
                //alert(email);
                url = 'Register';
                fetch(url, options)
                    .then(response => window.location.href = 'LoadCategoryList')
                    .then(data => console.log(data))
                    .catch(e => console.error(e))


        }, function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
        });

    }
</script>

在我的 javascript 代码中，我首先尝试通过发送 email 和 name 来发送表单数据。

下面是我的Servlet

package register;

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


public class Register extends HttpServlet {


    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");

        response.setContentType("application/json");

        String email = request.getParameter("email");
        String name = request.getParameter("name");

        System.out.println("Name: "+name +" Email: "+email);
    }


    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }


    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }


    @Override
    public String getServletInfo() {
        return "Short description";
    }

}

在我的 servlet 中，我使用 request parameters 来获取数据。但是，当我打印收到的内容时，我的输出如下。

Name: null Email: someone6@example.com;name= Peakgen

似乎我没有按预期获取请求参数中的数据。我该如何解决这个问题？

Answer 1

用 & 分隔符将参数放在 URL 中

 url = 'Register?email=${email}&name=${name}';

Answer 2

我想出了解决办法。在body中使用数据作为参数，以&分隔

<script >

    function registerUser() {
        alert("hi");
        var email = "someone1@example.com";
        var password = "password";
        //Create User with Email and Password
        firebase.auth().createUserWithEmailAndPassword(email, password).then(function(user) {
            var user = firebase.auth().currentUser;
            alert(user.email); // Optional


            var email = firebase.auth().currentUser.email;
            var name = document.getElementById("name").value;
            var address = document.getElementById("address").value;
            var phone = document.getElementById("phone").value;
            var language = document.getElementById("language").value;

                //alert(email);
                // console.log(email) contains email

                const options = {
                    method: 'POST',
                    url: 'Register',
                    headers: {
                        // set appropriate headers, assuming json here
                        //"Content-Type": "application/json",
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    // form body, assuming json
                    //body: JSON.stringify(email)
                body: `email=${email}&name=${name}&address=$(address}&phone=${phone}&${language}`
                }
                //alert(email);
                url = 'Register';
                fetch(url, options)
                    .then(response => window.location.href = 'LoadCategoryList')
                    .then(data => console.log(data))
                    .catch(e => console.error(e))


        }, function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
        });

    }
</script>