Question

在网页上我想通过POST请求向servlet提交表单数据，接收答案并根据结果处理它。页面不得重新加载。不幸的是，我对这种事情（HTML和JavaScript）并不是很有经验。

目前我设法得到两个不成功的结果：

发送POST请求（由servlet正确处理）并重新加载页面并显示纯XML结果
或者POST请求永远不会发送，JavaScript函数会进行一些处理，但基本上没有结果。

我从这个页面得到了这样做的想法：https://www.w3schools.com/xml/xml_http.asp

具体做法是：

XMLHttpRequest对象是开发人员的梦想，因为你可以：
更新网页而不重新加载页面

目前我没有这样做。

我有一个像这样的HTML表单：

<form id="editform" 
    action="myAction" 
    method="post" 
    onSubmit="return submitForm(this);">

  ....

  <input type="hidden" name="operation" value="doSomething" />
  <input type="image" src="images/button.png" />
</form>

在页面的head部分，我有一个像这样的JavaScript：

function submitForm(oFormElement)
{
  var xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.open (oFormElement.method, oFormElement.action, true);
  xmlHttpRequest.onload = function()
  { 
    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) 
    {
      alert (xmlHttpRequest.responseXml);
    }
    else
    {
      alert ("Failed!");
    }
  };
  xmlHttpRequest.send (new FormData (oFormElement));
  return false;
}

如果JavaScript返回false，那么我在浏览器web-developer控制台中看不到任何POST请求，并且servlet也从未收到任何请求。警告框打印 undefined （案例2）。

如果JavaScript返回true，则确实发送了POST请求，并返回了正确的结果，但重新加载了页面（案例1）。

在肯定的if子句中，我想处理结果XML并相应地设置HTML元素。

Answer 1

你应该使用jQuery $ .ajax

示例：

$.ajax({
url: "myUrl", // url to make request
type: "POST", // method of request
data: {key: "value"}, // Here comes your data
success: function(response){ // If request is made successful
    //  Here you can handle response from your request
    console.log(response)
},
error: function(xhr){// If request has faced issue
    console.log(xhr.responseText)
}});

Answer 2

必须使用xmlHttpRequest.responseXml xmlHttpRequest.responseXML而不是oFormElement.action <input>。此外，似乎SELECT STRINGA, STRINGB, MIN(DATEFIELD) AS MIN_DATEFIELD FROM TABLENAME GROUP BY STRINGA, STRINGB;没有像我希望的那样接收我的{{1}}元素......

将表单数据提交到servlet并检索答案而不重新加载页面？

2 个答案: