Question

我需要让用户点击链接以显示包含表单的灯箱，提交表单并将用户重定向到新页面。

为了实现这一点，我定义了两个javascript函数，lightboxform函数来显示lightbox和subform函数来提交表单。问题是第二个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>

Answer 1

好吧，如果不查看处理页面的工作方式，以下是根据现有信息在黑暗中拍摄的内容;

您的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);

假设您的处理页面使用了post数组，这应该可以。

修改

关于您的更新，只是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

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

1 个答案: