jQuery ajax 和 php iframe。表单目标问题答案

【问题标题】：jQuery ajax and php iframe. Form target issuejQuery ajax 和 php iframe。表单目标问题
【发布时间】：2016-10-17 15:16:51
【问题描述】：

overflowers 这里是日常问题。 =)

用例和问题描述：

我正在通过 jQuery $.ajax({...}) 提交表单
- ajax post 调用触发由 php 完成的 SQL 插入。
- SQL 查询执行成功，可以在 DB 上进行检查。
用于显示结果的iframe没有得到更新。
- 附加到表单的原始按钮使用 target="id_of_iframe"*
发布目标在同一个 url，同一个目标 (my_iframe)

所以，

如何使用 $.ajax 帖子的结果数据更新 iframe？
我应该添加一些其他控件吗？
其他一些符合 iframe 的可编辑帖子数据的表单提交方法？

在此先感谢大家，祝编码日愉快:)

代码：

HTML

<html>
  <head>
    ...
  </head>
  <body>
    <!--the iframe -->
    <iframe src ="iframe.php" 
      class="my_iframe" id="my_iframe" 
      name="my_iframe" frameborder="0" allowtransparency="true">
    </iframe>
    <!--the form -->
    <form id="my_form" action="iframe.php" 
     method="post" target="my_iframe">
       <!-- some input fields -->
       <button onclick="my_function"></button>
    </form>
  </body>
</html>

JAVASCRIPT - JQUERY

function my_function(){
   var my_data = .../*go collect form data*/
   $.ajax({
     type: "POST",
     url: "iframe.php",
     data: my_data,
     success:function(response){
         $("#my_frame").html(response);
     }
   });
}

部分结果：

chrome 控制台记录此有关 jquery.min.js:4 的警告

主线程上的同步 XMLHttpRequest 已被弃用，因为其对最终用户体验的不利影响。如需更多帮助，检查https://xhr.spec.whatwg.org/。

一些 CSS 出现错误，一些字体/字体粗细发生变化

附言在 ajax.success 函数中，我尝试过这种替代方法，但问题是一样的：

$('#my_iframe').append(result);

【问题讨论】：

iframe 的正文不需要更新为html 或append。
您是否尝试在 ajax 调用后重新加载 iframe？
@mubasharabbas 亲爱的 mubashar，我该怎么办？ :)
请看答案。

标签： javascript php jquery ajax iframe

【解决方案1】：

要更新 iframe，您可以像这样更新它的 src 属性：

$('iframe#my_iframe').attr('src', 'iframe.php');

把它放在你的 ajax success 回调中。并且 iframe 将重新加载。

【讨论】：

仍然没有工作。帖子总是被提交并触发成功事件。