[英]Form post on same page without refreshing
How can i submit form on same page without refreshing page.I know that is possible with ajax but i am not perfect in ajax my native programming language PHP. 如何在不刷新页面的情况下在同一页面上提交表单。我知道可以使用ajax,但我在ajax我的本机编程语言PHP中并不完美。
HTML 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 使用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
<?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);
}
?>
// 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 );
});
}
ya i found it answer.In my case my php response is image.Now i sand submit form with ajax function .submit
with set the target
where result show.and also now i don't need form action on same page So i have changed action on save.php. 你发现它回答。在我的情况下,我的php响应是image.Now我使用ajax函数提交表单
.submit
设置target
结果show.and现在我不需要在同一页面上的表单操作所以我已经更改对save.php采取行动。
$("#myForm").ajaxForm
({
target: '#preview'
})
.submit();
HTML 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>
(Using jQuery AJAX is not hard at all! This is just for demo, not a solution to your code: (使用jQuery AJAX并不难!这仅用于演示,而不是代码的解决方案:
jQuery / JavaScript 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) : PHP(script.php):
$id = $_POST['id'];
//MAGIC PHP CODE
echo json_encode( MAGIC_CODE_TO_RETURN ); //I.e converting an array to json
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.