Cách chuyển đổi biểu mẫu đơn giản gửi đến cuộc gọi ajax;

Question

Tôi có một mẫu với lĩnh vực đầu vào có thể được truy cập như

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

và cuộc gọi trước đó là

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

và hình thức là

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

Tất cả đều chạy tốt
Bây giờ tôi muốn chuyển đổi nó thành cuộc gọi ajax để tại tôi có thể sử dụng dữ liệu trả về từ mã java trên cùng một trang. Vì vậy, tôi đã sử dụng soemthing như

 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); 
       } 

      } 
     ); 

Tuy nhiên mã trên không chạy. Xin hãy giúp tôi làm cho nó chạy

Answer 1

Tôi không biết làm thế nào nhưng điều này chạy tốt,

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) 
    }); 

Answer 2

data hy vọng một đối tượng theo nghĩa đen, vì vậy bạn cần:

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

Answer 3

Thay vì lấy tất cả các giá trị tham số và sau đó gửi chúng riêng biệt (có thể được thực hiện phía máy chủ cũng , sử dụng dưới đây code), sử dụng này:

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

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

divId là id của div chứa mẫu này.

Mã này sẽ gửi tất cả thông số biểu mẫu tới servlet của bạn. Bây giờ bạn có thể sử dụng request.getParameter trong servlet của bạn để có được tất cả các giá trị trường riêng lẻ trên servlet của bạn.

Bạn có thể dễ dàng chuyển đổi bài đăng jquery ở trên thành jquery ajax.

Hy vọng điều này sẽ giúp ích:

Answer 4

Cố gắng làm cho mã của bạn hoạt động. thử này:

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

Answer 5

// 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>