如何在提交表单时加载页面的内容

How to load the contents of a page when a Form is submitted?

本文关键字：加载 提交 表单      更新时间：2023-09-26

我有一个简单的PHP脚本，它使用ImageMagick来构建一个基于文本的简单图像。我现在只需要在屏幕上显示它，而不是保存图像。

所以我有一个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表单，它将允许我更改图像的变量。我想提交表格，然后让它在同一页上显示图像。我相信我可以使用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>

添加第二个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();
     $("<img />").attr("src","http://my-domain.com/magick-test.php?"+$("form").serialize).appendTo("#target_element");
});

其中目标元素是要显示图像的位置。

$(".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;
   }); 
});
相关文章：