Question

用户将输入一些尺寸，单击按钮并查看使用PHP创建的图像（无需刷新页面）。我到目前为止的代码并没有将图像放在页面上，任何想法都会非常感激。

draw.html：

<html>

 <head>
    <title>PHP Draw Test</title>
    <script src = "http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src = "draw.js"></script>
 </head>
 <body>
 <h1>Test the PHP GD module</h1>

 <div>
    <label>Height:</label>
    <input type="number" id="height" min=36 max=42 step=6 required />
    <label>Width:</label>
    <input type="number" id="width" value="50"/>
    <button id="SubmitRailing" type="button">Draw!</button>
    <button type="reset">Reset</button>
 </div>

 <div id="DrawBox"></div>
</body>
</html>

draw.js：

$(document).ready(function() {

    $('#SubmitRailing').click(function(){

        $.post("draw.php",
            {Height: $('#Height').val(), Width: $('#Width').val()},
            function(data){
                $('#DrawBox').html(data);
            }
        );
    }); 

});

draw.php：

<?php

$height = $_POST['Height'];
$width = $_POST['Width'];
$im = imagecreatetruecolor($width, $height);
$sand = imagecolorallocate($im, 222, 184, 135);
$white = imagecolorallocate($im, 255, 255, 255);

imagefill($im, 0, 0, $white);
imagecolortransparent($im, $white);
imagefilledrectangle($im, 4, 4, 50, 25, $sand);

imagepng($im, './drawtest.png');
imagedestroy($im);

echo '<img src="drawtest.png" />';
?>

UPDATE 语法语法语法我终于让这个工作，从@gibberish示例修改

data: { Height : Height, Width : Width},
success: function(data) {alert('This was sent back: ' + data);}

但是当我试图替换原来的陈述时：

function(data){$('#DrawBox').html(data);}

它会杀死脚本。最后这个工作，我不认为它应该是必要的，但你有它：

success: function(data){$('#DrawBox').html(data);}

Answer 1

这是因为您的input ID与$.post电话中检索到的ID width不同：您已将height设为#Width 1}}和#Height然而，您正在将其检索为jQuery(function($) { $('#SubmitRailing').on('click', function(){ $.post("draw.php", {Height: $('#height').val(), Width: $('#width').val()}, // note #height and #width function(data){ $('#DrawBox').html(data); } ); }); });和<div> <label>Height:</label> <input type="number" id="Height" min=36 max=42 step=6 required />  <label>Width:</label> <input type="number" id="Width" value="50"/>  <button id="SubmitRailing" type="button">Draw!</button> <button type="reset">Reset</button> </div>。

让你的jQuery代码如下：

{{1}}

或让您的HTML如此：

{{1}}

其中一种解决方案都可行。

Answer 2

这不是答案，只是一些提示：

（1）分而治之。将问题分解为简单的示例，并使每个部分独立工作。例如，首先只是获取按钮以显示隐藏的div - 这表明jQuery和代码已加载并正常工作。

$('#SubmitRailing').click(function(){
    $("hiddenDIV").show()
});

（2）接下来，修改您的draw.php页面，以便将绘图回显到屏幕上。确保它正在做你期望的事情。

（3）使用完整的$.ajax()格式，而不是$.post()，$.get()或$.load()等简写形式。不仅结构更容易排除故障，而且还可以获得其他功能。

有关AJAX的简单示例，请参阅这些帖子：

A simple AJAX example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

<强>更新

根据您的问题，请重构您的代码：

<?php 
    $ht = $_POST['height']; //initially, very good idea to keep the 3 vars different, for ease of reference
    echo $ht;
?>

$(document).ready(function() { 
    $('#SubmitRailing').click(function(){ 
        var Height = $('#height').val(); <-- missing ending semi-colon
        var Width = $('#width').val(); <-- missing ending semi-colon
        $.ajax({ 
            type: "POST", 
            url: "draw.php", 
            data: 'height='+Height+ '&width=' +Width, // <=== changes
            success:function(data){ 
                alert('This was sent back: ' + data); 
            } 
        }); 
    }); 
});

注意： AJAX无法发布到同一页面 - 它必须发布到不同的PHP页面。 See this SO question.

还要确保已经加载了jQuery库，通常在head标签中加载：

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

如果您使用CDN加载jQuery，如上例所示，它可能已经从其他网站预先加载 - 特别是如果您从googleapis或jquery.com CDN网站加载的

如果您想在jQuery上获得一些快速，免费，10分钟的复习课程，请在此处找到免费视频：

https://www.thenewboston.com/videos.php?cat=32

或

https://phpacademy.org/videos/jquery-basics

使用Ajax和PHP将图像发送到页面

2 个答案: