如何将简单表单​​提交转换为ajax调用;

Question

我有一个带输入字段的表单，可以像

一样访问

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

            }
        );

但是上面的代码没有运行。请帮助我让它运行

Answer 1

尝试使您的代码正常运行。试试这个：

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

Answer 2

data需要一个文字对象，所以你需要：

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

Answer 3

而不是检索所有参数值然后单独发送（也可以在服务器端完成，使用下面的代码），请使用：

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帖子转换为jquery ajax。

希望这会有所帮助：）

Answer 4

我不知道怎么会运行得好，

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