为什么在调用JavaScript函数后页面会遇到NullPointerException？

-1

我需要让用户点击一个链接来显示一个有窗体的灯箱，提交表单并将用户重定向到一个新页面。为什么在调用JavaScript函数后页面会遇到NullPointerException？

为了实现这一点，我定义了两个javascript函数，lightboxform函数来显示lightbox和子窗体函数来提交表单。问题是第二个javascript函数（子表单）将请求发送到后端，而不是重定向到索引页面，将其参数追加到原始地址。

比方说，我在下面的地址：

www.example.com/show?id=2

我点击链接以显示灯箱，提交位于灯箱的形式后，页面地址得到改变到以下地址：

www.example.com/show?p=3444&q=4555 << id parameter is replaced by p,q which are the parameters that I am trying to submit to backend

长话短说：我需要让用户点击一个链接，显示一个灯箱，用户将灯箱中的表单提交到后端并重定向到索引页面。

代码

//function to show lightbox 
function lightboxform(){ 
    document.getElementById("lightbox").style.display = "Block"; 
    document.getElementById("cover").style.display = "Block"; 
    if(window.XMLHttpRequest) 
    { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    else 
    { 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
     { 
      document.getElementById("lightbox").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("get","../../lightbox/myform",false); 
    xmlhttp.send(); 
    return false; 
} 

//function to submit the lightbox form to backend and redirect user to new address 
function subform(){ 
    p = $('#p').val(); 
    q = $('#q').val(); 
    document.getElementById("lightbox").style.display = "Block"; 
    document.getElementById("cover").style.display = "Block"; 
    if(window.XMLHttpRequest) 
    { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    else 
    { 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
     {  
      document.getElementById("lightbox").style.display = "none"; 
      document.getElementById("cover").style.display = "none"; 
      window.location = ("http://localhost:8080/index.action"); 
     } 
    } 
    xmlhttp.open("get","../../lightbox/processForm?p="+p+"&q="+q,false); 
    xmlhttp.send(); 
}

灯箱的形式

<form id="form393" onsubmit="return subform()"> 
     <input id="p" name="p" type="text"/> 
     <input id="q" name="q" type="text"/> 
     <input type="submit" value="submit" /> 
</form>

来源

2014-03-03 AlexCartio1

向我们展示您的html。也给出确切的错误信息。 – Daedalus

另外，你的网址根本不匹配。节目从哪里来？我看到processForm和myform，但没有myproducts等。 – Daedalus

问题已更新，我正在编辑html文件以上传它。 – AlexCartio1

嘛，不看怎么您处理页面的作品，下面是一个在黑暗中拍摄根据现有的资料;

您的ajax请求的问题是您最终如何执行。在接下来的两行：

xmlhttp.open("POST","../../lightbox/processForm?p="+p+"&q="+q,false); 
xmlhttp.send();

你让一个POST请求，但不给请求的任何数据。对于POST请求，数据通过标题发送，而不是通过url发送。所以，你必须查询字符串追加到.send()方法：

xmlhttp.open("POST","../../lightbox/processForm",false); 
xmlhttp.send("p="+p+"&q="+q);

假设你处理页面使用接线柱阵列，这应该工作。

编辑：

在问候你的更新，只需简单window.location不正是正确的，尽管它是没有错无论是。根据下面链接的文章，虽然窗口对象的Location对象是只读的，但它可以分配一个字符串作为href的一种别名。鉴于这是你目前正在做的，而这不适合你，我建议代替replace。例如：

window.location.replace("http://www.example.com/"); //closest to http redirect 
window.location.href = "http://www.example.com/"; //simulate user clicking link

我建议你了解更多信息请查看this answer，还有MDN article把它。

DEMO

来源

2014-03-03 05:29:34 Daedalus

我编辑了代码，但问题仍然存在。 – AlexCartio1

问题更新 – AlexCartio1

@ AlexCartio1更新。但是，请不要修改您的问题，使这个答案过时，以便它解决的问题不再可见。请添加到它，但不要删除原来的问题。 – Daedalus

为什么在调用JavaScript函数后页面会遇到NullPointerException？

回答

相关问题