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庫的原因是因為它們使所有這些（以及更多）變得更加簡單。