Javascript 如何在提交表单后仍停留在模式窗口中

模态窗口中有一个窗体。我正在调用ajax在同一个模式窗口上加载内容。但问题是它在提交表单后会恢复到主页面。即使在提交表单后，我如何保持在相同的模式窗口上？下面的代码在模型窗口中

<form action="" method="post">
<input type="submit" name="editgroupscript" class="btn green" value="Submit" />
</form>

模态窗口代码：

<!-- ### Modal ###   -->
     <div id="edit_script" class="modal hide">
        <div class="modal-header">
           <button data-dismiss="modal" class="close" type="button"></button>
           <h3>Edit Script</h3>
        </div>
        <div class="modal-body">
<!-- some content -->

编辑脚本

我们需要采取行动吗？

您有两个选择-

选项1：通过Javascript提交表单

<form action="http://www.yoursite.com/form.xxx" method="post">
<input type="button" name="editgroupscript" class="btn green" value="Submit" onclick="formSubmitFunction()" />
</form>

Javascript:
function ajax() {
  var obj;
  if(window.ActiveXObject) {
    try {
  obj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
  obj = new ActiveXObject("Microsoft.XMLHTTP");
}
  }
  else {
    obj = new XMLHttpRequest();
  }
  return (obj);
}

function formSubmitFunction() {
  // Creating the POST body
  var myForm = document.forms["myForm"];
  var value1 = myForm["value1"].value;
  var value2 = myForm["value2"].value;
  var parameters = "value1="+value1+"&value2="+value2;

  // Sending a POST via AJAX
  var ajax = ajax();
  ajax.onreadystatechange = function () {
    if((ajax.readyState == 4) && (ajax.status == 200)) {
      // Action on successful response
    }
  };
  ajax.send("POST", "yourURL", true);
  ajax.send(parameters);
}

Javascript:
函数ajax（）{
var-obj；
if（window.ActiveXObject）{
试一试{
obj=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}
捕获（e）{
obj=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
}
否则{
obj=新的XMLHttpRequest（）；
}
返回（obj）；
}
函数formSubmitFunction（）{
//创建POST主体
var myForm=document.forms[“myForm”]；
var value1=myForm[“value1”]。值；
var value2=myForm[“value2”]。值；
var parameters=“value1=“+value1+”&value2=“+value2；
//通过AJAX发送帖子
var ajax=ajax（）；
ajax.onreadystatechange=函数（）{
if（（ajax.readyState==4）和&（ajax.status==200））{
//成功应对的行动
}
};
send（“POST”，“yourURL”，true）；
发送（参数）；
}

选项2：将表单定向到iframe

<form action="http://www.yoursite.com/form.xxx" method="post" target="iframe">
<input type="submit" name="editgroupscript" class="btn green" value="Submit"/>
</form>
<iframe src="about:blank" style="display:none" id="iframe" name="iframe"></iframe>

Javascript:
var iframe = document.getElementById("iframe");
iframe.onload = function () { formSubmitResponse(iframe); };
function formSubmitResponse(iframe) {
  var idocument = (iframe.contentDocument || iframe.contentWindow.document);
  if(idocument) {
    var responseFromBackend = idocument.getElementsByTagName("body")[0].innerHTML;
  }
}

Javascript:
var iframe=document.getElementById（“iframe”）；
iframe.onload=函数（）{formSubmitResponse（iframe）；}；
函数formSubmitResponse（iframe）{
var idocument=（iframe.contentDocument | | iframe.contentWindow.document）；
如果（i文档）{
var responseFromBackend=idocument.getElementsByTagName（“正文”）[0].innerHTML；
}
}

以下是使用iframe时发生的情况： 1.单击提交按钮。 2.表单参数被提交到后端脚本。 3.页面不刷新。 4.后端脚本的输出被发送到iframe。

---

5.这个方法模仿AJAX

你能发一些代码吗？我猜您正在将表单提交到服务器端脚本。您需要使用jQuery.submit（）方法查找。这真的值得花时间去读。你能详细说明一下吗。。如何通过javascript提交表单？我想将该表单变量传递到javascript中，并处理另一个php表单以获取同一页面中的数据。我为我工作。。但它会将表单变量传递给javascript吗？通过Javascript，我的意思是您可以通过AJAX提交表单。我将通过添加一个示例来编辑答案。在Javascript中，您可以搜索以下变量-document.forms[“formName”][“variableName”].value。一旦收集了变量，就可以通过AJAX调用将它们传递到后端。这就是你想要的吗？正如你在回答中所说，我使用了iframe。我可以通过提交表单保持在相同的模式窗口。但是我不能通过onsubmit事件传递表单参数。