为什么我的AJAX代码只在局部工作？

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

1. 您已经将$(document).ready函数包含在im()函数中。为什么？

2. 你为什么不使用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(); 
   
   }); 
   }