2012-06-18 4 views
8

У меня есть форма с полем ввода, которые могут быть доступны как
Как конвертировать простую форму submit to ajax call;

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, так что я могу использовать возвращенные данные из java-кода на той же странице. Поэтому я использовал soemthing как

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

      } 
     ); 

Однако вышеуказанный код не работает. Пожалуйста, помогите мне сделать его запустить

+0

Прежде всего использовать JQuery сериализации Http: // апи. jquery.com/serialize/, чтобы преобразовать ваши данные формы в «текстовую строку в стандартной кодировке с кодировкой URL» –

+0

Получаете ли вы некоторые js erros? –

+0

И можете ли вы опубликовать ошибку javascript или консольный журнал здесь? –

ответ

1

Я не знаю, как, но это один работает хорошо,

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

, предложенный моим старшим – veer7

5

data ожидает буквального объекта, так что вам нужно:

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

Текущая версия jQuery ([документация для 'ajax()'] (http://api.jquery.com/jQuery.ajax/), начиная с июня '15) позволяет значение ' data' должен быть строкой и на самом деле преобразован в безопасную строку, если это не так. – sameers

3

Вместо извлечения всех значений параметров и затем отправить их по отдельности (что может быть сделано на стороне сервера, а также , используя код ниже), Используйте:

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

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

divId является идентификатором DIV, содержащего эту форму.

Этот код отправит все параметры формы на ваш сервлет. Теперь вы можете использовать request.getParameter в своем сервлете, чтобы получить все значения отдельных полей вашего сервлета.

Вы можете легко конвертировать над jquery post в jquery ajax.

Надеется, что это помогает :)

9

Попытке сделать ваш код функциональным. попробуйте это:

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

Это var data = $ ("form [name = algoForm]"). Serialize(); ? Нужно ли включать какие-либо файлы? – veer7

+0

Единственное, что вам нужно - это библиотека jQuery. –

+0

Да, я уверен, что строка должна работать нормально, если ваше имя формы «algoForm», как вы писали выше. –

0

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

Смежные вопросы