从 Java（maven 应用程序）访问 javascript 数据

Question

我希望这是发布此内容的正确子论坛。 一般来说，我对 maven、vaadin 和 java 应用程序非常陌生，所以我希望你能帮助我，因为我不确定最好的方法是什么。 基本上我有一个maven项目（java 7），它使用javascript创建一个弹出窗口，里面有一个表单，允许你上传一个文件，在textarea中显示它的内容并发送它（文件的内容作为字符串）通过ajax请求到服务器。那是容易的部分。 我现在要做的是在 Java 中访问通过 ajax 发送的数据（包含上传文件数据的字符串），因为我需要通过一些验证来运行它。 我环顾四周，包括 vaadin 的书，以及一般的网络，考虑到我以前从未这样做过，似乎一种方法可能是有一个连接器，但它看起来有点太复杂了出现 - 从我从 vaadin https://vaadin.com/docs/-/part/framework/gwt/gwt-overview.html 的书中了解到 - 鉴于我拥有的结构，我将无法在我的项目中实现它 - 这与那里的结构不同。 所以，我对你们的问题是，鉴于我拥有的项目（只是一个普通的 Maven 项目），我从 Java 访问这些数据的最简单方法是什么？ 这是项目中的一些代码，用于将内容放入上下文中：

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.JavaScript;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.client.ui.*;

@Theme("mytheme")
@Widgetset("my.vaadin.apptest.MyAppWidgetset")
@com.vaadin.annotations.JavaScript({"https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"

})
public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        layout.addStyleName("myLayout");//add class to main div        
        Label label = new Label("Hello Vaadin user. Use this application to upload files.");
        ...
        //HERE IS THE JAVASCRIPT CREATING AND INSTANTIATING THE POPUP AND THE AJAX CALL
        //CREATING POPUP
        JavaScript.getCurrent().execute(""
        +"var $HTMLpopup = $('<div class=\"popupContainer\">"
            +"<span class=\"cancelBtn big\"></span>"
            +"<div class=\"wrapper\">"
                +"<form action=\"\" id=\"fileForm\">"
                    +"<div class=\"mask\">"
                        +"<input type=\"file\" title=\" \"name=\"uploadFile\" class=\"uploadFile\" accept=\".mol,.sdf\">/*filters files to upload*/"
                        +"<span class=\"pseudoBtn\">Browse</span>"
                        +"<input type=\"text\" name=\"displayFile\" class=\"displayFile\" placeholder=\"no file loaded\">"
                        +"<span class=\"cancelBtn small\"></span>"
                    +"</div>"
                    +"<textarea class=\"fileResult\"></textarea>"
                    +"<button type=\"submit\" class=\"submitBtn\">Upload</button>"
                    +"<div class=\"clear\"></div>"
                +"</form>"
            +"</div>"
        +"</div>');"
        //INSTANTIATING THE POPUP
        +"$('.popupTriggerBtn').click(function(){"
            +"/*console.log('button clicked!');*/"
            +"var $body = $('body');"
            +"$HTMLpopup.appendTo($body);"
        +"});"
        //HERE IS THE AJAX BIT
        +"var $submitBtn = $HTMLpopup.find('.submitBtn');"
        +"$submitBtn.click(function(e){"
            +"e.preventDefault();/*prevent submission*/"                   
            +"if(isFileUploadEmpty()){/*IF EMPTY*/"
                +"/*alert('submit clicked');*/"
                +"removeError();"
                +"showError('empty');"                       
            + "}"
            +"else{/*IF NOT EMPTY*/"
                +"/*AJAX OPS*/"
                +"if (window.XMLHttpRequest){/*XMLHttpRequest SUPPORT?*/"
                    +"console.log('XMLHttpRequest supported!');"
                    +"var postData = returnFileAsString();/*returns the file as a string*/;"                           
                    +"/*console.log('here is the file as a string ' + postData);*/"
                    +"$.ajax({"
                        +"type:'post',"
                        +"url:'http://localhost:8080/apptest/',"
                        +"data:postData,"
                        +"contentType: 'application/x-www-form-urlencoded',"
                        +"success: function(responseData, textStatus, jqXHR){"
                            +"/*alert('data saved');*/"
                            +"console.log('responseData is ' + responseData);"
                            +"console.log('text status is ' + textStatus);"
                            +"console.log('the data submitted is ' + postData );"
                        +"},"
                        +"error: function(jqXHR, textStatus, errorThrown){"
                            +"console.log(errorThrown);"
                            +"alert('an error has occurred!');"
                        +"}"   
                    +"});"
                +"}"
            +"}"
        +"});"       
    +"");
    //ADDING COMPONENTS
    layout.addComponents( label, button );
    layout.setMargin(true);
    layout.setSpacing(true);

    setContent(layout);
}

链接到 pastebin 这里http://pastebin.com/mSEJq0HT 因此，postData 包含我传递给服务器并且我想在 Java 中访问的字符串。 我早些时候遇到过这个问题，这可能是也可能不是另一种处理方式vaadin with ajax。你们有什么感想？ 任何帮助将不胜感激，谢谢

Answer 1

好吧，首先我需要表达我的深切关注，即您以一种非常奇怪的方式使用了错误的工具来达到您想要的效果。我不会深入探讨该主题，但让我们指出 Vaadin 框架的主要目的是允许开发人员用 Java 编写组件（类似于 Swing 组件）以避免 JavaScript 混乱。是的，您可以使用 Vaadin 框架运行 JavaScript，但您应该尽可能避免使用它。

好的，现在让我们进入黑客攻击。您有两个选项可以让您的服务器捕获文件数据（如您所说，这是一个字符串）：

a) 摆脱手动构建 XMLHttpRequest。让 Vaadin 为您处理。而不是

+"$.ajax({"
+"type:'post',"
+"url:'http://localhost:8080/apptest/',"
...

只是调用 JavaScript 函数，让我们说

sendFileContentToTheServer(postData)

接下来您需要在服务器端注册 JavaScript 回调（阅读：Vaadin）。在你的代码中的某个地方（在哪里并不重要，只要确保代码至少被调用一次 - 最好是一次）放置：

JavaScript.getCurrent().addFunction("sendFileContentToTheServer", new JavaScriptFunction() {
    public void call(JSONArray arguments) throws JSONException {
        System.out.println(arguments.getString(0));
        //do whatever you want with your data - its under arguments.getString(0)
    }
});

就是这样。 Vaadin 将为您管理 RPC 调用。您的页面不会重新加载，您将在服务器端获取数据。

b) 第二种方法更棘手。技术上可以手动构造 XMLHttpRequest 并使用 Vaadin 在服务器上接收数据。您需要做的是注册 JavaServlet（不是 VaadinServlet）。将数据发送到 JavaServlet。然后通过一些代理或引用调用现有的 VaadinUI。这是一种复杂的做事方式，你已经把它弄得很棘手，所以我不会深入探讨。