Как конвертировать простую форму submit в 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, чтобы я мог использовать возвращенные данные из кода 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);
                }

            }
        );

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

Ответы

Ответ 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);
        }
    );

Ответ 2

Давайте используем serialize jQuery для получения данных из form а затем используем функцию jQuery ajax для отправки данных на сервер:

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

Ответ 3

data ожидает буквальный объект, поэтому вам нужно:

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

Ответ 4

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

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

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

divId - id div, содержащий эту форму.

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

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

Надеюсь, что это поможет:)

Ответ 5

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

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

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