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>以便它再次执行{{ 1}}检查并打印更新的if(isset($_GET["one"]))变量。

编辑2：

我的代码现在如下：
的的index.php

php

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

现在我希望<?php if(isset($_GET["one"])) { ?> <div> <?php echo $_GET["one"] . " " . 4_GET["two"]; ?> </div>  <?php } ?> div附加到ajax.php中的#append div。必须有一种比改变index.php和使用echo更好的方法：

ajax.php（带回声）

ajax.php

因此，由于<?php if(isset($_GET["one"])) { echo "<div>". $_GET["one"] . " " . $_GET["two"] . "</div>"; } ?>可能非常大，是否有更好的解决方案只是回显ajax.php到ajax.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 } ?>

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 
   }
);

Answer 3

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

注意：jQuery为文档就绪处理程序提供了一个方便的快捷方式：

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

Answer 4

我不确定我是否正确理解了这个问题，但是你可以做的是：将一些ID或至少css类名称分配给目标div并绘制你从AJAX响应中得到的东西如下。


    $(document).ready(function() {
        $("#calculator_form").submit(function(event) {
            event.preventDefault();
            $.ajax({
                url: "Ajax_URL",
                success: function(result) {
                    $("#targetDiv").html(result.one + " " + result.two); //assuming you have assigned ID to the target div.
                }
            });
        })
    })

使用AJAX刷新div

的index.php

编辑：

编辑2：

4 个答案: