使用AJAX刷新div

Question

Index.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：

我的代码现在如下：
Index.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能够附加到index.php中的#append div。必须有比更改ajax.php并使用echo更好的方法：

ajax.php（带有echo）

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

那么，由于 ajax.php 可能会很大，有没有比仅仅从 ajax.php 向 index.php 输出数据更好的解决方案呢？

- C_B

---

你的控制台上有错误吗？ - ventaquil

你的代码示例中 data 是从哪里获取的？除了你的 read 与 ready 打错字之外，代码应该可以正常工作（假设 data 是有效的）。 - iCollect.it Ltd

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

- DpEN

Answer 2

使用这个，

$(document).ready(function() { 
   $(document).on('submit',"#calculator_form",function(event) {
      event.preventDefault();
      $.get(
         'ajax.php',
         function(ret_data){
            $("#divtoappend").html(ret_data);
         }
      );
   });
}) ;

$.get 的原始语法为：

$.get(
   URL,
   {
        VAR_NAME1:VAL1, 
        VAR_NAME2:VAL2
   },
   function(response){
       // your action after ajax complete 
   }
);

- sanjeev shetty

---

如果我将刷新区域代码放在ajax.php文件中，它会被附加到#divtoappend吗？ - C_B

Answer 3

我不确定我是否正确理解了问题，但是这里是你可以做的事情：为目标div分配一些ID或至少CSS类名，并像下面这样绘制从AJAX响应中获取的内容。

    $(document).ready(function() {
        $("#calculator_form").submit(function(event) {
            event.preventDefault();
            $.ajax({
                url: "Ajax_URL",
                success: function(result) {
                    $("#targetDiv").html(result.one + " " + result.two); //假设您已经为目标div分配了ID。
                }
            });
        })
    })

- Pallav Kulshreshtha

Answer 4

笔误：您不小心使用了$(document).read(而不是$(document).ready(！这将停止您的代码运行。

注意：jQuery有一个方便的快捷方式用于文档就绪处理程序：

$(function(){ 
    // your code here
});

- iCollect.it Ltd