Question

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

关于如何将响应放在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>

Answer 1

尝试使用以下内容查看帖子未被解雇的原因，并且从未完成＆＃34;已完成＆＃34;。

// 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" );
});

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

1 个答案: