Question

我目前有：

<script>
var btn = document.getElementById("doReload");
btn.onclick = function(){

    setTimeout(function(){
        $("#div1").load("News.php");
    }, 5000);
}

</script>
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="image" />
<input id="doReload" type="submit"/>
</form>

所有这些都是使用src =在iframe中加载的，当我点击提交按钮时，我希望它进行文件上传（目前它正在进行），然后我希望它将News.php重新加载到Div1中以显示更新的文件，有关如何执行此操作的任何想法？

Answer 1

要触发#doReload点击回调，请尝试在标记后添加脚本：

<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="image" />
<input id="doReload" type="submit"/>
</form>
<script>
var btn = document.getElementById("doReload");
btn.onclick = function(){

    setTimeout(function(){
        $("#div1").load("News.php");
    }, 5000);
}

</script>

或将其包装在$( document ).ready(function() { ... });

中

但是，由于（afaik）没有回复html表单提交成功，你可能想要使用jQuery＆＃39; $.post进行回复，然后使用其success回调来检索新数据。

Answer 2

好的，问题是你的表单在超时执行函数之前提交。

您应该使用jQuery通过event.preventDefault（）提交表单（jQuery submit），以阻止提交按钮实际重新加载页面。

这可以通过改变代码来完成：

＆＃13;

document.getElementById("doReload").addEventListener("click", function(e) {
  e.preventDefault();
  var form = this.parentElement;
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action);
  xhr.addEventListener("readystatechange", function() {
    if (xhr.readyState == 4 && xhr.status == 200) $("#div1").load("News.php");
  })
  xhr.send(new FormData(form));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form action="upload/" method="POST" enctype="multipart/form-data">
  <input type="file" name="image" />
  <input id="doReload" type="submit" />
</form>

＆＃13;

（解决了与其他一些小修改的聊天，但这是最终的工作代码）

使用iframe内的按钮重新加载iframe外的div

2 个答案: