3

模态窗口中有一个表格。我正在调用 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 -->

有什么我们需要付诸行动的吗？

4

1 回答 1

4

你有两个选择——

选项 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);
}

选项 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;
  }
}

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

于 2013-09-19T17:20:59.950 回答