[英]How to load the contents of a page when a Form is submitted?
我有一个使用ImageMagick来构建基于文本的简单图像的简单PHP脚本。 除了保存图像,我现在只需要在屏幕上显示它即可。
所以我有一个PHP文件来构建图像,并使用此文件将其打印到屏幕上。
/* Create image */
$image->newImage($metrics['textWidth'], $metrics['textHeight'], $background);
$image->setImageFormat('png');
$image->drawImage($draw);
/* Show image */
header('Content-type: image/png');
echo $image;
要查看图像并更改其外观,我将URL格式设置如下。
http://my-domain.com/magick-test.php?font=&fontsize=100&fontcolor=ffffff&bgcolor=000000
现在我需要一些帮助。 我正在创建第二个PHP文件,该文件将具有HTML Form trhat,这将允许我更改图像的变量。 我想提交表单,然后在同一页面上显示图像。 我相信我可以使用JavaScript甚至AJAX做到这一点。
有人可以给我展示一个基本的示例,如何提交我的表单,并让它显示在预览DIV的同一屏幕上创建的图像吗? 我也可以使用jQuery。
我的HTML表单将是这样的...
<form action="magic-text.php">
Text: <input type="text" name="text" size="100"><br>
Font: <select name="font">
<option value="angelica-webfont.ttf">Angelica</option>
<option value="angelica-webfont.ttf">Angelica</option>
<option value="angelica-webfont.ttf">Angelica</option>
</select><br>
Font Size: <select name="fontsize">
<option value="11">Font Size</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select><br>
Font Color <select name="fontcolor">
<option value="#FF0000">Red</option>
<option value="#FF5000">Orange</option>
<option value="#FFF200">Yellow</option>
</select><br>
<input type="submit" class="btn" style="display: inline-block;">
</form>
因此,您可以执行以下操作:
$(".btn").click(function(e){
e.preventDefault();
$("<img />").attr("src","http://my-domain.com/magick-test.php?"+$("form").serialize).appendTo("#target_element");
});
目标元素是您要显示图像的位置。
添加第二个html元素
<img src="" id="myimg" />
然后使用jQuery
并接受FORM
元素并对其进行ajaxSubmit
...
$(function() {
$("form").submit(function(ev) {
$("#myimg").attr("src", "http://..." + $(this).serialize());
ev.preventDefault();
return false;
});
});
$(".btn").click(function(e){
e.preventDefault();
var request = $.ajax({ url : "http://my-domain.com/magick-test.php", type : 'POST', dataType : 'json', data : $('#myform').serializeArray() });
request.done(function(json) {
if (json.status == 'ERROR') {
return false;
}
$('#preview').innerHML = json.image;
return true;
});
request.fail(function() {
return false;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.