javascript - 使用 AJAX 刷新 div

Question

索引.php

...
<form id="calculator_form" name="form" action="" method="get" >
  <input name="one" type="text">
  <input name="two" type="text">
  <input type="submit">
</form>
...
<!-- refresh area -->
<?php if(isset($_GET["one"])) { ?>
<div>
  <?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
<------------------->

我想提交表单并重新加载上面指示的刷新区域。我知道这可以通过使用 AJAX 来实现但我不太确定如何。

我试过将刷新区域放在一个单独的 ajax.php 中文件和使用 JQuery但它没有用；

$(document).ready(function() { 
   $("#calculator_form").submit(function(event) {
      event.preventDefault();
      $("#divtoappend").load("ajax.php", data);
   })
}) 

我也试过使用 $.get() 但无济于事。

我能够将数据来回发送到一个单独的 php页面，但我一直在尝试实现我正在寻找的东西。

编辑:

我发布的代码写得很快，语法不是问题所在，我只是想知道如何刷新 <div>在表单下，这样它将再次执行 if(isset($_GET["one"]))检查并打印更新的 php变量。

编辑 2:

我现在的代码如下:
索引.php

...
<form id="calculator_form" name="form" action="" method="get" >
  <input name="one" type="text">
  <input name="two" type="text">
  <input type="submit">
</form>
...
<div id="append">
  <!-- where I want the ajax response to show -->
</div>
...

ajax.php

<?php if(isset($_GET["one"])) { ?>
<div>
   <?php echo $_GET["one"] . " " . 4_GET["two"]; ?>
</div>
<!-- assume there's n number of divs -->
<?php } ?>

现在我想要 ajax.php div 附加到 #append div in index.php .必须有比改变 ajax.php 更好的方法并使用 echo :

ajax.php(带回显)

 <?php 
 if(isset($_GET["one"])) { 
    echo "<div>". $_GET["one"] . " " . $_GET["two"] . "</div>";
 } 
 ?>

So, as ajax.php could be very large, is there a better solution than just echoing data from ajax.php to index.php?

Answer 1

现在可以通过多种方式完成此操作。其中之一是关注。试试这个:

Index.php 文件

<form method="get" id="calculator_form">
  <input name="one" type="text" id="one">
  <input name="two" type="text" id="two">
  <input type="submit" name="submit">
</form>

<div class="result"></div>

<script type="text/javascript">
$(document).ready(function(){
    $("#calculator_form").on('submit', function(event){
        event.preventDefault();

       var one = $('#one').val(); // Taking value of input one
       var two = $('#two').val(); // Taking value of input two

       $.get( "ajax.php", { one:one, two:two }). done( function( data ) {

          $('.result').html(data); // Printing result into result class div
        });

    });
});
</script>

ajax.php

<?php if(isset($_GET["one"])) { ?>
<div>
  <?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>