如何更改此代码以便以另一种方式工作

时间:2010-09-26 21:57:15

标签: php javascript html ajax

我有这段代码:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script>
      $(function() {
        $(".button").click(function() {

          var dataString = "message= "+$('#message').val();
          $.ajax({
            type: "POST",
            url: "calculate.php",
            data: dataString,
            success: function(data) {
              $('#result').append("<div id='message'> "+ data +" </div>");
            }
          });
        return false;
        });
    });
      </script>
     </head>
    <body>
    <div class="content">

    <?php   
    displayForm();

  function displayForm() {
  ?><div id="result"></div> 
    <div class="content2">
      <form action="practicalTask.php" method="post">   
          <div class="firstLine">   
            <label for="message"> Message </label> <div class="time"> Time </div>
          </div>
          <div class="secondLine">
              <input type="text" name="message" id="message" onclick="this.value='';" onblur="this.value=!this.value?' Please enter a message...':this.value;" value=" Please enter a message..." />pr
              <input type="submit" name="submitButton" class="button" value="OK" />
          </div>

      </form>
      <br/>
    </div>
    <div id="result"></div> 

    </div>
    <?php   } ?>
    </body>
  </html>

这是calculate.php:

<?php

    // Check the sum of the charachters of the message entered by user
    // Assumption - only white space is not a charachter    
    $feel = "Sorry";
    $count = 0;
    $message = $_POST["message"];
    $string = trim($message);

    for ($i=0; $i<strlen($string); $i++) {
            // ord() - cast to ascii
            $count += ord($string[$i]);
            }
    if ( $count%2==0 ) {
      $feel = "Glad";
    }

    $result = $feel . " to hear that ...";

    // Server side date for the result
    $date =  date('d/m/Y H:i');

    $form = "   
    <div class=\"content2\">
        <form action=\"practicalTask.php\" method=\"post\"> 
          <div class=\"firstLine\"> 
            <label for=\"message\">Message</label> <div class=\"time\"> Time </div>
          </div>
          <div class=\"secondLine\">
              <input type=\"text\" name=\"message\" value=" . $message . ">
              <input type=\"submit\" value=\"OK\" />
              <div id=\"time\"> " . $date . "</div>
          </div>
      </form>
    </div>";
    echo $form;

    $resultLine = "<div class=\"firstLine\"> Result </div>
                <div class=\"resultLine\">
                    <div class=\"result\">
                        <p class=\"" .$feel . "\">" . $result . "</p>
                    </div>
                    <div class=\"timestamp\">
                        <p class=\"" . $feel . "\">" . $date . "</p>
                    </div>
                </div>";    
    echo $resultLine;

    echo "<div class=\"margintop\"> <img src=\"sepsmall.jpg\" /> </div>";
?>

我想改变它的工作方式,以便新行(我写新东西的地方)将在底部。我尝试了很多方法,都失败了。

非常感谢..

1 个答案:

答案 0 :(得分:0)

好吧,我不完全确定我理解你需要什么,但这是我通常如何避免这些职位问题:

而不是:

 $(function() {
        $(".button").click(function() {

          var dataString = "message= "+$('#message').val();
          $.ajax({
            type: "POST",
            url: "calculate.php",
            data: dataString,
            success: function(data) {
              $('#result').append("<div id='message'> "+ data +" </div>");
            }
          });
        return false;
        });
    });
你可以:  $(function(){         $(“。button”)。click(function(){

      var dataString = "message= "+$('#message').val();
      $.ajax({
        type: "POST",
        url: "calculate.php",
        data: dataString,
        success: function(data) {
          $('#result').html(data);
        }
      });
    return false;
    });
});

使用PHP在服务器lvl上渲染整个内容,这基本上意味着在PHP返回中包含"<div id="message"></div>"。这不是世界上最聪明的东西,但是当我通过jQuery / Ajax从PHP提供内容时,我从未遇到过位置问题。