4

如何在不刷新页面的情况下在同一页面上提交表单。我知道使用 ajax 是可能的，但我在我的原生编程语言 PHP 的 ajax 中并不完美。

HTML 

<input type="submit" class="topopup1" value="Preview" onclick="capture();" >
<form method="POST" enctype="multipart/form-data"  id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
</form>

Javascript

function capture() {
$('.showcase').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();}
     });
  }

PHP

<?php


  //Show the image
  if(isset($_POST['img_val'])){
  echo '<img src="'.$_POST['img_val'].'" />';


  //Get the base-64 string from data
  $filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
  //Decode the string
  $unencodedData=base64_decode($filteredData);

  //Save the image
  file_put_contents('img.png', $unencodedData);
   }
   ?>
4

3 回答 3

2

使用$.post：

// When submitting form below is run
$( "#myForm" ).submit(function( e ) {
    // prevent form from sending like normal
    e.preventDefault();
    // Send post with ajax, with the postdata of the html form, whatever your page returns you can catch with .done(function(data));
    $.post( "", $( "#myForm" ).serialize() ).done(function( data ) {
        console.log( "return data: " + data );
    });
}
于 2013-11-04T14:38:10.673 回答
2

是的，我找到了答案。在我的情况下，我的 php 响应是图像。现在我使用 ajax 函数提交表单并.submit设置target结果显示。而且现在我不需要在同一页面上执行表单操作所以我更改了保存操作.php。 

  $("#myForm").ajaxForm
  ({
  target: '#preview'
  })
  .submit();

HTML 

<input type="submit"   value="Preview" onclick="capture();" >
 <form method="POST" action="save.php" enctype="multipart/form-data"  id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
 </form>
于 2013-11-04T19:54:55.513 回答
1

（使用 jQuery AJAX 一点也不难！这只是为了演示，而不是您的代码的解决方案：

jQuery / JavaScript

var myId = "this_is_my_id";

var myAjax = $.ajax({
  url: "script.php", //The url to your .php script
  type: "POST", //Method av sending data (POST / GET)
  data: {id : myid}, //variables to send (if GET it looks like this  script.php?id=this_is_my_id ) 
  dataType: "json" //The expected datatype of the answer
});

myAjax.done(function(the_data) {
  //
  // Place magic code that transform the json data (the_data = javascript object) you got from the script
  //
  $("#mydiv").html( your_magic_code );
});

myAjax.fail(function(jqXHR, message) {
  alert( "Failed: " + message );
});

PHP（脚本.php）：

$id = $_POST['id'];

//MAGIC PHP CODE

echo json_encode( MAGIC_CODE_TO_RETURN ); //I.e converting an array to json
于 2013-11-04T14:46:57.077 回答