如何将简单的表单提交转换为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);
                }

            }
        );

然而上述代码无法运行。请帮助我使其运行。

- veer7

---

首先使用 jQuery serialize http://api.jquery.com/serialize/ 将表单数据转换为“标准 URL 编码表示的文本字符串”。 - Arash Milani

你是否收到了一些JS错误？ - Anton L

你能在这里发布JavaScript错误或控制台日志吗？ - Arash Milani

@ArashMilani：是的，我必须使用那个，我会尝试。 - veer7

@ArashMilani: 错误消息是网页错误详细信息用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; MS-RTC LM 8; .NET CLR 4.0.20506) 时间戳: Mon, 18 Jun 2012 12:19:08 UTC消息: 预期的“}” 行: 75 字符: 6 代码: 0 URI: file:///E:/DineshDocs/FromNilesh/dinesh/menu1.html消息: 对象预期 行: 105 字符: 1 代码: 0 URI: file:///E:/DineshDocs/FromNilesh/dinesh/menu1.html - veer7

Answer 1

我们可以使用jQuery的serialize方法从form表单中获取数据，然后使用jQuery的ajax函数将数据发送到服务器：

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

- Arash Milani

---

这是不是 var data = $("form[name=algoForm]").serialize();？我需要包含任何文件吗？ - veer7

你唯一需要的就是 jQuery 库。 - Arash Milani

是的，如果你上面发布的表单名称为“algoForm”，那么我非常确定那行代码应该可以正常工作。 - Arash Milani

Answer 2

data需要一个字面量对象，因此您需要：

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

- Florian Margaine

---

jQuery的当前版本（截至2015年6月的“ajax()”文档）允许data参数的值是一个字符串，并且如果不是，实际上会被转换为安全的URL字符串。 - sameers

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 获取所有单个字段的值。

您可以轻松地将上述 jQuery post 转换为 jQuery ajax。

希望这可以帮助您 :)

- Ankit

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

- veer7

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>

- kobliha