如何將簡單表單提交轉換爲ajax調用;

我有輸入域的形式，它可以像
如何將簡單表單提交轉換爲ajax調用;

var algorithm = document.forms["algoForm"]["algorithm"].value; 
var input = document.forms["algoForm"]["input"].value;

訪問和先前調用未

document.forms["algoForm"].submit();

和形式是

<form name="algoForm" method="post" action="run.do">

這一切都運行正常
現在我想把它轉換成ajax調用，所以th我可以使用從同一頁面上的Java代碼返回的數據。所以我用了類似

 var algorithm = document.forms["algoForm"]["algorithm"].value; 
     var input = document.forms["algoForm"]["input"].value; 
     var data = 'algorithm = ' + algorithm + '&input = ' + input; 


    $.ajax(
      { 
       url: "run.do", 
       type: "POST", 
       data: data, 
       success: onSuccess(tableData) 
     //line 75  { 
        alert(tableData); 
       } 

      } 
     );

但是上面的代碼沒有運行。請幫我使其運行

來源

2012-06-18 veer7

首先都使用jQuery的序列化的http：// API。 jquery.com/serialize/將您的表單數據轉換爲「標準URL編碼表示法中的文本字符串」 –

您是否收到一些js erros？ –

你能發佈JavaScript錯誤或控制檯日誌嗎？ –

我不知道如何，但這個運行良好，

var algorithm = document.forms["algoForm"]["algorithm"].value; 
    var input = document.forms["algoForm"]["input"].value; 



     $.post('run.do', { 
     algorithm : algorithm, 
     input : input 
     }, function(data) {     
     alert(data) 
    });

來源

2012-06-18 13:36:27 veer7

由我的老師建議 – veer7

data需要一個文本對象，所以你需要：

var data = { 
    'algorithm': algorithm, 
    'input': input 
};

來源

2012-06-18 12:15:29

當前版本的jQuery（['ajax（）']的文檔（http://api.jquery.com/jQuery.ajax/），截至15年6月）允許'數據參數是一個字符串，如果不是，它實際上會轉換爲一個URL安全的字符串。 – sameers

不是檢索所有的參數值，然後分別向他們發送的（這是可以做到的服務器端，以及使用下面的代碼），使用此：

var $form = $("#divId").closest('form'); 
    data = $form.serializeArray(); 

    jqxhr = $.post("SERVLET_URL', data) 
     .success(function() { 
      if(jqxhr.responseText != ""){ 
       //on response 
      } 
     }); 
    }

divId是含有這種形式的div ID。

此代碼將所有的表單參數發送到您的servlet。現在，您可以在servlet中使用request.getParameter來獲取servlet上的所有單個字段值。

你可以輕鬆地將上面的jquery post轉換成jquery ajax。

希望這有助於:)

來源

2012-06-18 12:33:13 Ankit

試圖使您的代碼功能。試試這個：

var data = $("form[name=algoForm]").serialize(); 
$.ajax({ 
    url: "run.do", 
    type: "POST", 
    data: data, 
    success: function(tableData){ 
     alert(tableData); 
    } 
});

來源

2012-06-18 12:36:35

是否var data = $（「form [name = algoForm]」）。serialize（）; ？我是否需要包含任何文件？ – veer7

您需要的唯一東西就是jQuery庫。 –

是的，我敢肯定，如果你的表單名稱是「algoForm」，就像上面發佈的那樣，該行應該可以正常工作。 –

// patching FORM - the style of data handling on server can remain untouched 
 
$("#my-form").on("submit", function(evt) { 
 
\t var data = {}; 
 
\t var $form = $(evt.target); 
 
\t var arr = $form.serializeArray(); // an array of all form items 
 
\t for (var i=0; i<arr.length; i++) { // transforming the array to object 
 
\t \t data[arr[i].name] = arr[i].value; 
 
\t } 
 
\t data.return_type = "json"; // optional identifier - you can handle it on server and respond with JSON instead of HTML output 
 
\t $.ajax({ 
 
\t \t url: $form.attr('action') || document.URL, // server script from form action attribute or document URL (if action is empty or not specified) 
 
\t \t type: $form.attr('method') || 'get', // method by form method or GET if not specified 
 
\t \t dataType: 'json', // we expect JSON in response 
 
\t \t data: data // object with all form items 
 
\t }).done(function(respond) { 
 
\t \t console.log("data handled on server - response:", respond); 
 
\t \t // your code (after saving) 
 

 
\t }).fail(function(){ 
 
\t \t alert("Server connection failed!"); 
 
\t }); 
 
\t 
 
\t return false; // suppress default submit action 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

來源

2017-09-09 10:23:23 kobliha

如何將簡單表單​​提交轉換爲ajax調用;

回答

相關問題

如何將簡單表單提交轉換爲ajax調用;