Stripes和Ajax-如何使用AJAX将数据发送到服务器并使用数据刷新表

Question

我在网上冲浪如何将AJAX与Stripes结合使用，发现了这一点 。 但是，文档说明了使用Prototype框架作为客户端脚本。 不是Javascript。 但我想改用javascript。

我认为该块使用Prototype库。

<script type="text/javascript"
              src="${pageContext.request.contextPath}/ajax/prototype.js"></script>
      <script type="text/javascript" xml:space="preserve">
          /* ... */
          function invoke(form, event, container) {
              if (!form.onsubmit) { form.onsubmit = function() { return false } };
              var params = Form.serialize(form, {submit:event});
              new Ajax.Updater(container, form.action, {method:'post', parameters:params});
          }
      </script>

如何将其更改为javascript？ 还是我误会了一些东西。 我的主要目的是当用户单击一个按钮时，我想将该数据发送到服务器并在不刷新整个页面的情况下将其显示在表上。 我有一个ActionBean，它将保存数据。

谢谢。

Answer 1

如果您不打算导入库（我建议这样做，因为该代码对于非JS程序员可能会有点沉重），那么您将需要自己构建XMLHttpRequest对象。 MDN上有一个很好的指南 ，涵盖了基础知识，但通常这样做是这样的：

// Build the object
var httpRequest;  
if (window.XMLHttpRequest) { // Mozilla, Safari, ...  
    httpRequest = new XMLHttpRequest();  
} else if (window.ActiveXObject) { // IE 8 and older  
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
}
// Add the function for handling changes to state
httpRequest.onreadystatechange = function () {
    // Check the state of the request
    if (httpRequest.readyState === 4) {
        // The server has finished sending data and we are ready to handle it
        if(httpRequest.status < 400) {
            // Request was successful, Put your code for handling the response here
            // String of what the response was will be in httpRequest.responseText
        } else {
            // Request was not successful, probably want to display an error
        }
    } else {
        // Response is still being received and is not quite ready yet.
    }
}
// Now that we can handle it, we want to send the request
httpRequest.open("GET", "http://example.com");
// Don't forget to send it :)
httpRequest.send();

如您所见，它不是最简单的代码。 我强烈建议您通读有关该主题的MDN页面 ，因为它将帮助您理解上面的代码。 它可以帮助您执行更多操作，例如与请求一起发送数据。 并不是说在这里序列化和提交表单比上面的示例更多。 如果要提交表单，则需要确保通读全文。

我之所以推荐像Prototype或jQuery这样的JS库的原因是因为它们使所有这些（以及更多）变得更加简单。