dslpofp041310584 2015-07-23 10:59
浏览 83
已采纳

使用AJAX刷新div

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

I would like to submit the form and reload the refresh area indicated above. I know this can be achieved by using AJAX but I'm not quite sure how.

I have tried putting the refresh area in a separate ajax.php file and using JQuery but it didn't work;

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

I've also tried using $.get() but to no avail.

I'm able to send the data back and forth to a seperate php page but I'm stuck trying to achieve what I am looking for.

EDIT:

The code that I posted was quickly written and the syntax isn't the issue in question, I'm merely wondering how I can refresh a <div> under the form so that it will once again do the if(isset($_GET["one"])) check and print the updated php variables.

EDIT 2:

My code is now as follows:
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 } ?>

Now I want the ajax.php div to append to the #append div in index.php. There has to be a better way than altering the ajax.php and using echo:

ajax.php (with echo)

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

  • 写回答

4条回答 默认 最新

  • dpftppc9674 2015-07-24 05:01
    关注

    Now this can be done in many ways.. One of them is Following.. Try this:

    Index.php file

    <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 } ?>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • doushen4719 2015-07-23 11:07
    关注

    Use this,

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

    The original syntax for $.get is,

    $.get(
       URL,
       {
            VAR_NAME1:VAL1, 
            VAR_NAME2:VAL2
       },
       function(response){
           // your action after ajax complete 
       }
    );
    
    评论
  • douliao8760 2015-07-23 11:14
    关注

    Typo: You have accidentally used $(document).read( instead of $(document).ready(! That will stop your code running.

    Note: jQuery has a handy shortcut for the document ready handler:

    $(function(){ 
        // your code here
    });
    
    评论
  • dongxu7408 2015-07-23 11:26
    关注

    I'm not sure if I understand the question correctly, but here is what you can do: Assign some ID or at least the css Class name to the target div and paint the stuff you are getting from AJAX response something like below.

    
        $(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.
                    }
                });
            })
        })
    
    
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 Java中import为灰色
  • ¥15 手机等其他智能设备被监听
  • ¥15 在win10 64位的vs打包MSI文件,放到win7 64位上安装成可执行exe文件后,点击程序不运行。
  • ¥50 大众点评用户浏览/消费记录爬虫
  • ¥15 求制作一个个人网页,
  • ¥15 寻涂色内存脚本作者有项目有市场有资源.却技术
  • ¥15 蓝桥杯c51单片机问题
  • ¥15 ajax跨域问题请求修改代码
  • ¥15 python matplotlib
  • ¥15 短信测压+语音,有偿,必须用Python