Question

你好，这里的人是我的代码

echo('Name: <input type="text" id="Name" onchange="im()" value="your name"  name="Name" />');
echo('pointsize: <input type="text" id="pointsize" onchange="im()" value="50" name="pointsize" />');
echo('format: <input type="text" id="format" value=".gif" onchange="im()" name="format" />');
echo('BackGround Color: <input type="text" id="bckclr" value="red" onchange="im()" name="bckclr" />');
echo('FontColor: <input type="text" id="color" value="white" onchange="im()" name="color" />');
echo('Border Color: <input type="text" id="bcolor" value="blue" onchange="im()" name="bcolor" />');
echo('<a href="./lang/ims.php"><img src="'.$image.'" height="82" width="82" /></a>');
echo('Font: <input type="text" id="font" value="'.$image1.'" onchange="im()" name="font" />');

echo ('<div id="Div_Im">');
echo('replace me');
echo ('</div>');

这是我的AJAX代码。

<Script type="text/javascript">
    function im()
    {
        var Name=document.getElementById("Name").value;
        var pointsize=document.getElementById("pointsize").value;
        var format=document.getElementById("format").value;
        var bckclr=document.getElementById("bckclr").value;
        var color=document.getElementById("color").value;
        var bcolor=document.getElementById("bcolor").value;
        var font=document.getElementById("font").value;
        $(document).ready(function(){
            var url='Name='+Name+'&pointsize='+pointsize+'&format='+format+'&bckclr='+bckclr+'&color='+color+'&bcolor='+bcolor+'&font='+font;
            alert(url);
            //-----Sending request to server for getting job name list by ajax-----
            $.ajax({
                type    : "POST",
                url : "i.php?",
                data    : url,              
                cache   : false,
                success : function(html)
                {
                    //document.getElementById('Div_PJobId').style.display="block";
                    //alert('hi');
                    alert(html);
                    var pic='<img src="'+html+'">';
                    $("#Div_Im").html(pic).show();
                }
            });
        });
     }
</script>

这是i.php的服务器页面代码

$Name=$_POST["Name"];
$pointsize=$_POST["pointsize"];
$bckclr=$_POST["bckclr"];
$color=$_POST["color"];
$bcolor=$_POST["bcolor"];
$format=$_POST["format"];
//$filename = "./lang/sri".$format;
$filename = "./lang/".$Name.$format;
$font=$_POST["font"]; 

$cmd = " -background $bckclr -pointsize $pointsize -font $font -fill $color ".
            " -strokewidth 1 -stroke $bcolor label:\"$Name\" ";

exec("convert $cmd $filename");
//if($filename)
//{}
//echo('<img src="'.$filename.'">');
echo $filename;

请检查demo link。内容（图中所示）仅在我对名称进行更改时才会替换，但它不适用于颜色，bcolor，字体等...每次进行更改时都需要刷新页面....是否有一种解决这个问题的方法吗？

Answer 1

我正在调试你的代码，发现每个东西在客户端工作正常，因为每次更改（在输入中）你用最新数据调用你的服务器并根据你从服务器获得的html替换你的图像。

我相信您的服务器端代码存在问题。正如我所看到的那样，您正在使用名称字段值为创建的图像文件指定名称。它表示已经为名称图像文件创建了颜色更改，因为已经提供了名称。你应该看看你的服务器端代码。有些时间响应从服务器返回无限时间。

Answer 2

您已在$(document).ready函数中包含im()函数..为什么会这样？

为什么不使用jQuery获取输入值？

function im() { 

$.ajax({ 
   type: "POST", 
   url: "i.php?", 
   data: {
         Name:$('#Name').val(), 
         pointsize:$('#pointsize').val(),
         format:$('#format').val(),
         bckclr:$('#bckclr').val(),
         color:$('#color').val(),
         bcolor:$('#bcolor').val(),
         font:$('#font').val()   
   },               
   cache: false
}).done(function(html) { 

        //document.getElementById('Div_PJobId').style.display="block"; 
        //alert('hi'); 
        alert(html); 
        var pic='<img src="'+html+'">'; 
        $("#Div_Im").html(pic).show(); 

}); 
}

为什么我的AJAX代码只能部分工作？

2 个答案: