【问题标题】:post form values to a phpgd script without refreshing the page and without button将表单值发布到 phpgd 脚本而不刷新页面且没有按钮
【发布时间】:2011-09-30 15:34:32
【问题描述】:

我不擅长服务器端技术(有时很难将我的注意力集中在这些技术上)。我对 PHP 很满意。

我有一个提供颜色选项的表单(现在是下拉格式,但将来会是图像点击)。表单中有多种选择,例如,您可以在一个选择菜单中选择一种框架颜色,然后在此插图中的另一个选择菜单中选择一种顶部颜色。根据您所在的页面,最多可以有 12 个选项,全部命名为 a、b、c、d...到 l。

我有一个由 phpgd 库创建的图像。这是 php gd 的当前设置:

    $a = $_POST['a'];//1
    $b = $_POST['b'];//2
    $c = $_POST['c'];//3
    $d = $_POST['d'];//4
    $e = $_POST['e'];//5
    $f = $_POST['f'];//6
    $g = $_POST['g'];//7
    $h = $_POST['h'];//8
    $i = $_POST['i'];//9
    $j = $_POST['j'];//10
    $k = $_POST['k'];//1
    $l = $_POST['l'];//12


    $default = imagecreatefrompng('../configurator-testing/11ta-503/default.png');
    $defaulta = imagecreatefrompng('../configurator-testing/11ta-503/black_a.png');
    $defaultb = imagecreatefrompng('../configurator-testing/11ta-503/black_b.png');

    header('Content-Type: image/png');

    $x = imagesx($default);
    $y = imagesy($default);

    imagecopy($default, $defaulta,0, 0, 0, 0, $x, $y);
    imagecopy($default, $defaultb, 0, 0, 0, 0, $x, $y);

    imagepng($default);

    imagedestroy($default);
    imagedestroy($defaulta);
    imagedestroy($defaultb);

现在,它只发布一个“默认”图像,它有一个黑色的框架,黑色的顶部。我想要它做的是接受表单输入,而不刷新页面或使用提交按钮,使用提交的值来更改创建的图像。文件名根据提交的值进行格式化(例如,提交的黑色将与文件 black_a.php 和 black_b.php 等相关联)。这是我正在测试的表格:

    <img src="config-gd.php"/>

    <form id="configform" name="configform">
    <label>Frame Color</label>
    <select name="a" id="a">
    <option value="black">black</option>
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
    </select> 
    <label>Top Color</label>
    <select name="b">
    <option value="black">black</option>
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
    </select> 

请注意,它在表单上方的第一行中提取了我的图像 (phpgd) 文件,因此我希望通过我的 phpgd 脚本处理选择,并在表单上方的图像中丢弃新的颜色选择。

我可以弄清楚如何让它在 phpgd 脚本中处理,没问题。我在发布时遇到问题,没有刷新且没有按钮部分。有人知道一些 jquery/ajax 并愿意提供帮助吗?我一直在尝试从网络上的教程中整理一些东西,我过得很糟糕。

我找到了一些简单的函数来建模,这是我想出的,但我不知道如何最好地实现,到目前为止我的努力还没有结果:

    function postImg(layer1, layer2){   

       $.ajax({ 
          url: "config-gd.php", 
          data: { 
              id: layer1, 
              rate: layer2 
          }, 
          type: "POST", 
          success: function(){ 
             alert('Done!'); 
          } 
       }); 

    } 

【问题讨论】:

  • 是的,例如。抱歉...我试图说明我最多可以有 12 个选项,并且图像是根据颜色和字母命名的...所以你知道我的想法了。

标签: php jquery ajax


【解决方案1】:

如果我是对的,您希望通过 php 创建的图像在不重新加载页面的情况下加载到事件中。我觉得很简单。

===================编辑部分代码被替换======================== ==========

好的,我知道您需要将表单数据发送到 php,这对于 Ajax 来说是微不足道的,创建图像也很容易,但对我来说似乎困难的是如何将 php 发送的原始数据转换为真实图像使用js。

所以我这里没有包含 ajax,但是你仍然可以动态发送表单数据,当然无需重新加载并获取所需的图像,使用图像的 src 属性,检查此代码,也许它可以是如果根据您的需要定制一些帮助。

image.php

 if($_GET['color']=='red')
    {$red=223;  $green=32;   $blue=3;}
 else
    {$red=0;   $green=0;   $blue=0;}

$im = @imagecreate(110, 20)
    or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, $red, $green, $blue);
$text_color = imagecolorallocate($im, 233, 233, 231);
imagestring($im, 11, 5, 5,  $_GET['txt'], $text_color);
imagepng($im);
imagedestroy($im);
?>

index.htm

 <html>
<head>
<script type="text/javascript">

   function updateImage(color)
{   
    var txt = document.getElementById("myTxtId").value;
    document.getElementById("imgElement").src='image.php?txt='+txt+'&color='+color; 
}   

</script> 
</head>
<body > 

Write something here and I will get it back as an image created by php.<br>
<form >
<input type="text" name="txt" id="myTxtId">
<input type=submit value="Get it it black" onclick="updateImage('black');return false;" >
<input type=submit value="Get it it red" onclick="updateImage('red');return false;" >
</form>

 <img  src="" border=24  color=gold height="111" width="222" id="imgElement">   

</body>
</html> 

【讨论】:

  • 我正在尝试在不刷新页面的情况下发布表单...此时加载图像不是问题。我需要在做出选择时发布表单,没有提交按钮,也没有重新加载。可以计算出图像加载,我相信在这一点上几乎没有问题。有任何想法吗?感谢您的回答。
  • 感谢您的回答,然后是您对帖子的编辑。我想我现在会追求另一个方向,因为我需要 ajax 部分的帮助。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-15
  • 2017-11-04
  • 1970-01-01
  • 2020-09-19
  • 2023-03-20
相关资源
最近更新 更多