如何提交没有重载页面的表单,没有jQuery?
我的表格如下,它需要发送一个动作给我的Java Servlet来更新数据库。如何提交没有重载页面的表单,没有jQuery?
如何在没有页面重新加载的情况下提交表单? 目前与action="myServlet"
它保持直接我到一个新的页面。如果我将操作移除到myServlet,则输入不会添加到我的数据库中。
<form name="detailsForm" method="post" action="myServlet"
onsubmit="return submitFormAjax()">
name: <input type="text" name="name" id="name"/> <br/>
<input type="submit" name="add" value="Add" />
</form>
在我的Java servlet的观点,request.getParameter
将查找名称,继续将其添加到我的分贝。
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
if (request.getParameter("add") != null) {
try {
Table.insert(name);
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
在我的JavaScript的一部分,我有一个submitFormAjax
功能
function submitFormAjax()
{
var xmlhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
alert(xmlhttp.responseText); // Here is the response
}
var id = document.getElementById("name").innerHTML;
xmlhttp.open("POST","/myServlet",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=" + name);
}
变化形式
onsubmit="submitFormAjax(event)"
更改您的JS代码
function submitFormAjax(e)
{
e.preventDefault();
var xmlhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
......
................
...............
return false; //at last line
类似问题的代码在这里被问到 Submit form without reloading page
基本上,在调用函数后做“返回false”。像这样的东西应该可以工作:
<form name="detailsForm"
method="post"
action="myServlet"
onsubmit="submitFormAjax();
return false;"
>
不适用于我,页面不断重新加载。 –
是的 - 它没有工作,因为在onsubmit处理程序中,我们'return submitFormAjax();返回false;'。它应该是'submitFormAjax(); return false;'。我创建了一个小提琴 - > https://jsfiddle.net/yoL0f0mp/ - 并编辑并修复了答案。 – Canu667
这是我如何在没有JQuery的JS中实现Ajax。作为一个PHP和JS的家伙,我不可能帮助你与Java Servlet的一方,但是是继承人从JS方面的一点帮助。这个例子是一个工作的例子,看看它是否对你有帮助。
// HTML side
<form name="detailsForm" method="post" onsubmit="OnSubmit(e)">
// THE JS
function _(x){
return document.getElementById(x);
}
function ajaxObj(meth, url)
{
var x = false;
if(window.XMLHttpRequest)
x = new XMLHttpRequest();
else if (window.ActiveXObject)
x = new ActiveXObject("Microsoft.XMLHTTP");
x.open(meth, url, true);
x.setRequestHeader("Content-type", "application/json");
return x;
}
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200){
return true;
}
}
function OnSubmit(e) // call this function on submit
{
e.preventDefault();
var username = _("name").value;
if (username == "")
{
alert("Fill out the form first");
}
else
{
var all = {"username":username};
all = JSON.stringify(all);
var url = "Myservlet";
var ajax = ajaxObj("POST", url);
ajax.onreadystatechange = function()
{
if(ajaxReturn(ajax) == true)
{
// The output text sent from your Java side in response
alert(ajax.responseText);
}
}
//ajax.send("user="+username+");
ajax.send(all);
}
}
感谢
您将需要从你的函数返回'FALSE'停止标准形式的发生也提交。 (您需要修正函数中的语法错误:'.getElementById(“name)''中关闭''''前面缺少的'''。) – nnnnnn
[Submit form form without reloading page](http: //www.*.com/questions/18169933/submit-form-without-reloading-page) – abhishek