Javascript iframe中不显示Ajax/jquery结果。改为在新页面中显示_Javascript_Jquery_Html_Ajax_Iframe

Javascript iframe中不显示Ajax/jquery结果。改为在新页面中显示

javascript jquery html ajax iframe

Javascript iframe中不显示Ajax/jquery结果。改为在新页面中显示,javascript,jquery,html,ajax,iframe,Javascript,Jquery,Html,Ajax,Iframe,我已经搜索了stackoverflow和其他论坛，但我无法解决所描述的问题。下面这个问题在IE 11和Firefox 10.0.2中以同样的方式表现出来我想提交（发布）一个表单到一个网站（），并在页面上显示结果（一个处理过的手的桥牌表） javascript如下所示： <script> // -------------Create the form var formData = new FormData(); var content = '[Board "1"]' + '

我已经搜索了stackoverflow和其他论坛，但我无法解决所描述的问题。下面

这个问题在IE 11和Firefox 10.0.2中以同样的方式表现出来

我想提交（发布）一个表单到一个网站（），并在页面上显示结果（一个处理过的手的桥牌表）

javascript如下所示：

<script>
// -------------Create the form
  var formData = new FormData();
  var content = '[Board "1"]' + '\n' +
               '[Dealer "N"]' + '\n' +
               '[Vulnerable "EW"]' + '\n' +
               '[Deal "N:K97.K43.6432.QT8 Q52.765.KJ.76543 AT8.AQ2.9875.AK9 J643.JT98.AQT.J2"]'; // the body of the new file...
  var blob = new Blob([content], { type: "text/plain"});

  formData.append( "fileToUpload", blob, "somename.pbn" )

  formData.append("event",0); 

// ------------Submit the form
      $.ajax({
          url: 'http://mirgo2.co.uk/bridgesolver/upload_file.php',
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
              $("#theTarget").html(returndata);
              alert(formData);
          },
          error: function () {
              alert("error in ajax form submission");
          }
      });
</script>

<iframe id="theTarget" name="theTarget" ></iframe>


//------创建表单
var formData=new formData（）；
变量内容='[板“1”]'+'\n'+
“[经销商“N”]”+“\N”+
“[易受攻击的“EW”]”+“\n”+
“[Deal”N:K97.K43.6432.QT8 Q52.765.KJ.76543 AT8.AQ2.9875.AK9 J643.JT98.AQT.J2”；//新文件的正文。。。
var blob=新blob（[content]，{type:“text/plain”}）；
append（“fileToUpload”，blob，“somename.pbn”）
formData.append（“事件”，0）；
//------提交表格
$.ajax({
网址：'http://mirgo2.co.uk/bridgesolver/upload_file.php',
键入：“POST”，
数据：formData，
async:false，
cache:false，
contentType:false，
processData:false，
成功：函数（返回数据）{
$（“#目标”）.html（返回数据）；
警报（formData）；
},
错误：函数（）{
警报（“ajax表单提交错误”）；
}
});

目标是一个iframe，在页面上定义如下：

<script>
// -------------Create the form
  var formData = new FormData();
  var content = '[Board "1"]' + '\n' +
               '[Dealer "N"]' + '\n' +
               '[Vulnerable "EW"]' + '\n' +
               '[Deal "N:K97.K43.6432.QT8 Q52.765.KJ.76543 AT8.AQ2.9875.AK9 J643.JT98.AQT.J2"]'; // the body of the new file...
  var blob = new Blob([content], { type: "text/plain"});

  formData.append( "fileToUpload", blob, "somename.pbn" )

  formData.append("event",0); 

// ------------Submit the form
      $.ajax({
          url: 'http://mirgo2.co.uk/bridgesolver/upload_file.php',
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
              $("#theTarget").html(returndata);
              alert(formData);
          },
          error: function () {
              alert("error in ajax form submission");
          }
      });
</script>

<iframe id="theTarget" name="theTarget" ></iframe>

结果很接近，但不完全相同

表单按预期提交，如Firefox F12所示网络显示

提交返回成功，如显示的formData警报所示

但是iframe在警报后面的页面上显示为空

相反在单击成功警报上的“确定”后，请求的数据会自动显示。包含iframe的页面将消失，并且电路板将显示在同一浏览器窗口中

我不明白为什么会发生这种情况，我也找不到其他方法来实现这一结果
欢迎所有建议
布拉姆·范奥斯特豪特
PS：这些评论提醒了我以下几点可能是相关的。发出请求的页面从域bram.van-oosterhout.org返回请求被发布到域名mirgo2.co.uk。浏览器窗口中的成功显示源于dds.bridgewebs.com
使用iframe的建议特定于这样一个事实，即结果的域不是返回包含ajax请求的页面的域
我还应该在上面说过，当服务器mirgo2.co.uk返回错误消息时，该机制会工作。当文件名不正确时（例如：somename.txt），服务器（mirgo2.co.uk）返回一条错误消息，该消息显示在页面的正确位置。但是当从dds.bridgewebs.com返回正确的结果时，我的页面将被dds.bridgewebs.com提供的结果取代
更新日期2017年6月27日11:20：我想我已经找到了问题的原因
mirgo2.co.uk返回的代码为：

<script language="JavaScript" type="text/JavaScript"> var filename="http://mirgo2.co.uk/bridgesolver/uploads/5951a6d4a9d308.60317801.pbn"; </script> <body> <script language="JavaScript" type="text/JavaScript"> location.replace("http://dds.bridgewebs.com/bsol2/ddummy.htm?club=bsol_site&file=" + filename);</script> </body>

变量文件名=”http://mirgo2.co.uk/bridgesolver/uploads/5951a6d4a9d308.60317801.pbn"; 位置。替换（“http://dds.bridgewebs.com/bsol2/ddummy.htm?club=bsol_site&file=“+文件名）；
当它被放置在iframe中时，它将被执行，location.replace将替换整个页面
这就解释了这些症状

我对javascript API不是很熟悉。关于如何将上述内容转换为所需的returndata=”的任何建议http://dds.bridgewebs.com/bsol2/ddummy.htm?club=bsol_site&file=“+文件名）？
我已经用暴力解决了这个问题。当满足以下条件时，实施工作正常：

success: function (returndata) { $("#theTarget").html(returndata);
替换为：

success: function (returndata) { var re = new RegExp( '\"(http://mirgo2.co.uk/bridgesolver/uploads/.*?.pbn)\"' + '[\\s\\S]*?' + '\"(http://dds.bridgewebs.com/.*?=)\"' ); var myResult = returndata.match( re ); document.getElementById('theTarget').setAttribute( 'src', myResult[2] + myResult[1] );
正则表达式提取返回内容中的两个URL。iframe然后显示url请求的数据
上面讨论了导致我这样做的观察结果
我强烈推荐IE11F12调试工具。尤其是网络选项卡和子选项卡

谢谢收听。
我也对使用相同的基础网站获得双虚拟解决方案感兴趣。在我的例子中，我想发出一个HTTPGET请求来获取解决方案。作为一个标准测试，我通过了一个要求，北方掌握所有黑桃，东方掌握所有红桃，南方掌握所有钻石，西方掌握所有梅花。脆弱性是没有的

curl "https://dds.bridgewebs.com/cgi-bin/bsol2/ddummy?request=m&dealstr=N:AKQJT98765432...%20.AKQJT98765432..%20..AKQJT98765432.%20...AKQJT98765432&vul=None"
站点用json字符串响应

{"sess":{"sockref":"(null)","ddtricks":"0d0d00d0d000d0d00d0d"},"contractsNS":"NS:NS 7S","contractsEW":"EW:NS 7S","scoreNS":"NS 1510","scoreEW":"EW -1510","vul":"0"}

“ddtricks”项编码为十六进制数字的5x4矩阵。前五个十六进制数字是北方的招数（新台币、黑桃、红桃、钻石、梅花），然后是南方、东方、西方。方向和服装总是按顺序固定的。但是，请求字符串可以将任何方向编码为dealstr的第一个字符（“N:…”）。
Firefox 10！！为什么？不要使用
async:false
。为什么首先要使用iframe，而不是div？Firefox 10运行在一个非常旧的Linux平台上，无法升级。我使用的示例中建议使用iframe。我认为这是必要的，因为我提取的结果与请求页面所在的域不同