执行从.post [duplicate]返回的JavaScript

Question

This question already has an answer here:

• Evaluating scripts in an ajax response 1 answer

I want JavaScript to execute the data that is returned from a post. I have found several similar threads but nothing that has cleared it up for me. eval() throws an unexpected identifier error.

The post:

$.post("./save.php", 
  {
    'images_key' : images_array,
    'userid_key' : $('#userid').val(),
    'avatar_key' : $('#avatar_name').val()
  },
  function( data ) 
  {
    $( "#responseText" ).val( data );
    eval(data);
  }
);

The post is returning:

$('.frame').html2canvas({
  onrendered: function (canvas) {
    //Set hidden field's value to image data (base-64 string)
    $('#img_val').val(canvas.toDataURL('image/png'));
    //Submit the form manually
    document.getElementById('myForm').submit();
  }
});

Any ideas?

Thanks!

MORE INFO:

On button click I'm calling this function:

function saveCSS() {

    var id_data = $(".frame div img").map(function() {
      return $(this).attr("id");
    }).get();

    var title_data = $(".frame div img").map(function() {
      return $(this).attr("title");
    }).get();

    var width_data = $(".frame div img").map(function() {
      return $(this).css("width");
    }).get();

    var height_data = $(".frame div img").map(function() {
      return $(this).css("height");
    }).get();

    var top_data = $(".frame div:has(img)").map(function() {
      return $(this).css("top");
    }).get();

    var left_data = $(".frame div:has(img)").map(function() {
      return $(this).css("left");
    }).get();

    var zindex_data = $(".frame div:has(img)").map(function() {
      return $(this).css("z-index");
    }).get();


    var images_array = [];
       $.each(id_data, function (index, value) {
        images_array.push(value);
        images_array.push(title_data[index]);
        images_array.push(width_data[index]);
        images_array.push(height_data[index]);
        images_array.push(top_data[index]);
        images_array.push(left_data[index]);
        images_array.push(zindex_data[index]);
    });

    $.post("./save.php", 
      {
        'images_key' : images_array,
        'userid_key' : $('#userid').val(),
        'avatar_key' : $('#avatar_name').val()
      },
      function( data ) 
      {
        // $( "#responseText" ).val( data );
        // console.log(data);
        eval(data);
      }
    );
}

The file save.php contains:

.
.
.
echo "
$('.frame').html2canvas({
    onrendered: function (canvas) {
        $('#img_val').val(canvas.toDataURL('image/png'));
        document.getElementById('myForm').submit();
    }
});
";
.
.
.

console.log(data) logs the echo as per expected however, in Chrome's console, when I execute saveCSS(), I see:

function( data ) 
      {
        // $( "#responseText" ).val( data );
        // console.log(data);
        eval(data);
**Uncaught SyntaxError: Unexpected Identifier**
      }
    );

I'm afraid I do not understand why I'm getting the error.

</div>

Answer 1

In order to execute the dat that is returning you have to eval it e.g.

$.post("./save.php", 
  {
    'images_key' : images_array,
    'userid_key' : $('#userid').val(),
    'avatar_key' : $('#avatar_name').val()
  },
  function( data ) 
  {
    $( "#responseText" ).val( data );
    eval(data);
  }
);

That said unless you absolutely trust the code you are receiving from the server, I wouldn't recommend executing the data as it could lead to a XSS vulnerability in your site.