在不刷新页面的情况下在同一页上进行表单提交

Question

如何在不刷新页面的情况下在同一页上提交表单。我知道可以使用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);
   }
   ?>

- Affan Ahmad

---

你没有ajax就做不了这件事。 - Patsy Issa

@PatsyIssa他并没有说他在寻找另一个解决方案，他只是指出他的主要技能是PHP。 - DannyThunder

在这里，您可以找到一个现成的jQuery插件，并附带一些示例：http://malsup.com/jquery/form/ - Petra

Answer 1

使用 $.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 );
    });
}

- Timmetje

---

我正在测试你的代码，但出现了错误。Uncaught TypeError: Object [object Object] has no method 'ajaxForm'。 - Affan Ahmad

您的表单ID可能不匹配，或者您正在使用冲突或损坏的jQuery库。请确保仅使用<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>，而不使用其他冲突的JS库作为例子。 - Timmetje

Answer 2

我找到了答案。在我的情况下，我的PHP响应是图像。现在，我使用带有设置target的ajax函数.submit提交表单，并且我不再需要在同一页上执行表单操作，因此我已将操作更改为save.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>

- Affan Ahmad

Answer 3

使用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（script.php）：

$id = $_POST['id'];

//MAGIC PHP CODE

echo json_encode( MAGIC_CODE_TO_RETURN ); //I.e converting an array to json

- DannyThunder