Fatal编程技术网
  • javascript/
  • Javascript 将表单json响应放入div块（而不是iframe）中

Javascript 将表单json响应放入div块（而不是iframe）中

javascript jquery html json iframe

Javascript 将表单json响应放入div块（而不是iframe）中,javascript,jquery,html,json,iframe,Javascript,Jquery,Html,Json,Iframe,我试图将json表单响应捕获到div块中，但我无法。。。 以下示例在提交表单时发送视频文件和其他参数。它返回一个json响应，并将其放入iframe中。父窗口和iframe属于不同的域，因此无法通过javascript访问iframe（postFrame）中的信息 您知道如何将响应放入div（或类似）中吗 谢谢你的帮助 注意：在这个示例中，我添加了一个按钮（submitButtonNew），它使用jquery执行表单的提交，并尝试将响应重定向到回调函数（正如我在一些示例中看到的那样），但效果并不

我试图将json表单响应捕获到div块中，但我无法。。。 以下示例在提交表单时发送视频文件和其他参数。它返回一个json响应，并将其放入iframe中。父窗口和iframe属于不同的域，因此无法通过javascript访问iframe（postFrame）中的信息

您知道如何将响应放入div（或类似）中吗

谢谢你的帮助

注意：在这个示例中，我添加了一个按钮（submitButtonNew），它使用jquery执行表单的提交，并尝试将响应重定向到回调函数（正如我在一些示例中看到的那样），但效果并不好。如果我删除表单的目标参数，响应将在新页面中返回

<html> 
<head>
  <title>Media API: JavaScript Example - create_video with tags and itemState</title>
</head>
<script type="text/javascript">
function doFileUpload(){
  form = document.getElementById("create_video_sample");
  buildJSONRequest(form);
  form.action = document.getElementById("yourAPILocation").value;
  form.submit();
}

function buildJSONRequest(form){
  if(document.getElementById('name').value =="" || document.getElementById('shortDescription').value =="" || form.filePath.value ==""){
    alert("Require Name, Short Description and File");
    return;
  }else{
    json = form.JSONRPC
    //Construct the JSON request:
    json.value = '{"method": "create_video", "params": {"video": {"name": "' + 
    document.getElementById('name').value +  '","tags": ["'+ document.getElementById('tagvalue1').value +'","'+ document.getElementById('tagvalue2').value +'","'+ document.getElementById('tagvalue3').value +'"],"shortDescription": "' + document.getElementById('shortDescription').value +'","itemState": "'+document.getElementById('itemState').value+'"},"token": "'+ document.getElementById('yourWriteToken').value + '","encode_to":"'+document.getElementById('encodeto').value+'","create_multiple_renditions": "'+document.getElementById('rendition').value+'"}}';   
    form.JSONView.value = json.value;
  }
}

$(document).ready(function() {
    form = document.getElementById("create_video_sample");
    form.action = document.getElementById("yourAPILocation").value;
    var datajson = '{"method": "create_video", "params": {"video": {"name": "' + document.getElementById('name').value +  '","tags": ["'+ document.getElementById('tagvalue1').value +'","'+ document.getElementById('tagvalue2').value +'","'+ document.getElementById('tagvalue3').value +'"],"shortDescription": "' + document.getElementById('shortDescription').value +'","referenceId": "'+document.getElementById('referenceId').value +'","itemState": "'+document.getElementById('itemState').value+'"},"token": "'+ document.getElementById('yourWriteToken').value + '","encode_to":"'+document.getElementById('encodeto').value+'","create_multiple_renditions": "'+document.getElementById('rendition').value+'"}}';
    var jsonObj = JSON.parse(datajson);

    $('#create_video_sample').submit(function() { // catch the form's submit event
        event.preventDefault();
        /* post method */
        var posting = $.post( $(this).attr('action'), jsonObj);

        posting.done(function( data )
        {
            alert("hola");
            /* Put the results in a div */
            $( "#newdiv" ).html(data);
        });
    });

    $("#testbutton").click(function() {
        form = document.getElementById("create_video_sample");
        buildJSONRequest(form);
        form.action = document.getElementById("yourAPILocation").value;
        $("#create_video_sample").submit();
    });
});
</script>

<div style="font-weight:bold;font-size:24">create_video example: Upload a Video</div>
(Only a Name, Short Description and Video File are required to create a video) <br/>
<!-- Exposing the token like this is a *Bad_Idea* !! Please don't do this in production, it makes it less than trivial for someone to steal your token.
See http://help.brightcove.com/developer/docs/mediaapi/security.cfm for more info -->

<table style="width:50%">
<tr><td style="width:20%">Write Token: </td><td style="width:100%"><input id="yourWriteToken" size="55" value="ZY4Ls9Hq6LCBgleGDTaFRDLWWBC8uoXQHkhGuDebKvjFPjHb3iT-4g.."/><br/>
</td></tr> 
<tr><td>API Location: </td><td><input id="yourAPILocation" size="55" value="http://api.brightcove.com/services/post" /></td></tr>
<tr><td>Video Name: </td><td><input id="name" size="55" type="text" value="testVideo"/></td>
      <tr><td>Tag1: </td><td><input id="tagvalue1" size="55" type="text" value="Tag 1"/></td></tr>
      <tr><td>Tag2: </td><td><input id="tagvalue2" size="55" type="text" value="Tag 2"/></td></tr>
      <tr><td>Tag3: </td><td><input id="tagvalue3" size="55" type="text" value="Tag 3"/></td></tr>
      <tr><td>Short description: </td><td><input id="shortDescription" size="55" type="text" value="test Video"/></td></tr>
      <tr><td>Create Multiple Renditions(TRUE/FALSE): </td><td><input id="rendition" size="55" type="text" value="true"/></td></tr>
      <tr><td>Encode to(MP4/FLV): </td><td><input id="encodeto" size="55" type="text" value="MP4"/></td></tr>
      <tr><td>Video State </td><td><input id="itemState" size="55" type="text" value="ACTIVE"/></td></tr>

<br/> <br/>
<form id="create_video_sample" method="POST" enctype="multipart/form-data" target="postFrame">
  <!--This is where the actual json request lives, it has to come before the file input -->
  <input type="hidden" name="JSONRPC" />
  <tr><td>File:</td><td><input type="file" name="filePath"/></td></tr>
</table><br/><br/>
  <button id="submitButton" onclick="doFileUpload()">Upload</button> <br/>
  <button id="submitButtonNew">Upload and put in a div</button> <br/>
  <!--display the json request -->

  <div id="newdiv"></div>

  <fieldset>
  <legend>JSON Request</legend>
    <input name="JSONView" id="JSONView" style="width:100%;border:none"/>
  </fieldset><br/>
</form>

<br/>

<fieldset>
<legend>Response:</legend>
  <iframe id="postFrame" name="postFrame" style="width:100%;border:none"></iframe>
</fieldset>

<br/><br/>


</html>


媒体API:JavaScript示例-使用标记和itemState创建_视频
函数doFileUpload（）{
form=document.getElementById（“创建视频样本”）；
buildJSONRequest（表单）；
form.action=document.getElementById（“yourAPILocation”）.value；
表单提交（）；
}
函数buildJSONRequest（表单）{
if（document.getElementById（'name'）。value==“document.getElementById（'shortDescription'）。value==“form.filePath.value==”）{
警报（“要求名称、简短描述和文件”）；
返回；
}否则{
json=form.JSONRPC
//构造JSON请求：
json.value='{“方法”：“创建视频”，“参数”：{“视频”：{“名称”：“'+
document.getElementById（'name'）.value+'，“tags”：[“+document.getElementById（'tagvalue1'）.value+”，“+document.getElementById（'tagvalue2'）.value+”，“+document.getElementById（'tagvalue3'）.value+”，“shortDescription:“+document.getElementById（'shortDescription'）.value+”，“itemState:“+document.getElementById（'itemState'）.value+”，“标记”：“+document.getElementById（'yourWriteToken'）.value+”，“encode_至”：“+document.getElementById（'encodeto'）.value+”，“创建多个格式副本”：“+document.getElementById（'rendition'）.value+”}”；
form.JSONView.value=json.value；
}
}
$（文档）.ready（函数（）{
form=document.getElementById（“创建视频样本”）；
form.action=document.getElementById（“yourAPILocation”）.value；
var datajson='{method:“create_video”，“params:“{”video:“{”name:“+document.getElementById（'name'）.value+”，“tags:”[“+document.getElementById（'tagvalue1'）.value+”，“'+document.getElementById（'tagvalue2'）.value+”，“'+document.getElementById（'tagvalue3'）.value+”，“shortDescription:“+document.getElementById:”（'shortDescription'）.value+'，“referenceId:“+document.getElementById（'referenceId'）.value+”，“itemState:“+document.getElementById（'itemState'）.value+”，“token:“+document.getElementById（'yourWriteToken'）.value+”，“encode_to:“+document.getElementById（'encodeto'）.value+”，“创建多个格式副本”+document.getElementById:“+document.getElementById:”（'rendition'）。值+'“}}}'；
var jsonObj=JSON.parse（datajson）；
$（'#create_video_sample'）.submit（函数（）{//捕获表单的提交事件
event.preventDefault（）；
/*post方法*/
var posting=$.post（$（this.attr（'action'），jsonObj）；
过帐.完成（功能（数据）
{
警报（“hola”）；
/*将结果放入div中*/
$（“#newdiv”）.html（数据）；
});
});
$（“#测试按钮”）。单击（函数（）{
form=document.getElementById（“创建视频样本”）；
buildJSONRequest（表单）；
form.action=document.getElementById（“yourAPILocation”）.value；
$（“创建视频样本”）.submit（）；
});
});
创建视频示例：上传视频
（创建视频只需要名称、简短描述和视频文件）

写入令牌：

API位置：
视频名称：
标记1：
标记2：
标签3：
简要说明：
创建多个格式副本（真/假）：
编码到（MP4/FLV）：
视频状态



文件：



上传

上传并放入div

JSON请求




答复：
试着用下面的方法看看为什么帖子没有被触发，也从来没有“完成”

您是否尝试过
$（“#newdiv”）.html（JSON.stringify（data））
？感谢您的帮助，它不起作用，因为我的问题是函数“done”从未执行过……我见过很多这样的示例，它们工作正常，但这不是我的情况。我想（但我不确定）问题在于页面的域和表单帖子的域是不同的。 
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
  alert( "success" );
}).done(function() {
     alert( "second success" );
}).fail(function() {
     alert( "error" );
}).always(function() {
    alert( "finished" );
});

// Perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() {
alert( "second finished" );
});