0

以下は正常に動作している私のコードです...

<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>

そしてphpコード...

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 を使用してサーバーからデータをフェッチし、正常に動作するように表示していますが、変更を加えるたびに div を更新する必要があります。

いくつかの変更を加えたときにdivを更新する方法...また、データがサーバーからのものであるときに、シンボルまたはロードイメージを追加する必要があります.....それを行う方法は?

4

2 に答える 2

0

多分これを試してみてください：

Javascript

<script type="text/javascript">
$(document).ready(function(){

  $('#theIMform input')
    .change(function(){
      // Automatically creates a Query String for all fields within the parent form
      formdata = $(this).closest('form').serialize();

      $.ajax({
        type : "POST" ,
        url : "i.php" ,
        data : formdata ,              
        cache : false ,
        error : function( jqXHR , textStatus , errorThrown ){
          // Something went wrong
        } ,
        success : function( data , textStatus , jqXHR ){
          $( "#div_im" )
            .hide()
            .html( '<img src="'+data+'">' )
            .show();

        }
      });
    });

});
</script>

PHP

?>
<form id="theIMform" name="theIMform">
  Name: <input type="text" id="Name" value="your name"  name="Name" />
  pointsize: <input type="text" id="pointsize" value="50" name="pointsize" />
  format: <input type="text" id="format" value=".gif" name="format" />
  BackGround Color: <input type="text" id="bckclr" value="red" name="bckclr" />
  FontColor: <input type="text" id="color" value="white" name="color" />
  Border Color: <input type="text" id="bcolor" value="blue" name="bcolor" />
  <a href="./lang/ims.php"><img src="<?php echo $image; ?>" height="82" width="82" /></a>
  Font: <input type="text" id="font" value="<?php echo $image1; ?>" name="font" />
</form>
<div id="div_im">replace me</div>
<?php
于 2012-09-21T09:06:28.940 に答える
-1

ページ要素を変更すると、自動的に更新されます。

あなたの問題はこの行に関するものだと思います

$("#Div_Im").html(pic).show();

div ではなく img 要素に対して show を呼び出すためです。

で変更してみてください

$("#Div_Im").html(pic);
$("#Div_Im").show();

さらに、jquery を使用して値を取得することをお勧めします。そのため color=document.getElementById("color").value;、より簡単に変更する必要があります。color = $('#color').val();

于 2012-09-21T08:51:13.110 に答える