表单提交后更新div内容而无需重新加载页面 [英] Updating div content after form submit without page reload

问题描述

好的，我有一个弹出窗口，显示一些有关客户的注释.内容(注释)通过ajax显示(通过ajax获取数据).我也有一个add new按钮来添加新笔记.该注释也添加了ajax.现在，在将注释添加到数据库之后出现了问题.

alright, I have a popup which displays some notes added about a customer. The content (notes) are shown via ajax (getting data via ajax). I also have a add new button to add a new note. The note is added with ajax as well. Now, the question arises, after the note is added into the database.

如何刷新显示笔记的div?

我已经阅读了多个问题，但找不到答案.

I have read multiple questions but couldn't get an answer.

我的代码以获取数据.

<script type="text/javascript">
    var cid = $('#cid').val();
    $(document).ready(function() {
        $.ajax({    //create an ajax request to load_page.php
            type: "GET",
            url: "ajax.php?requestid=1&cid="+cid,             
            dataType: "html",   //expect html to be returned                
            success: function(response){                    
                $("#notes").html(response); 
                //alert(response);
            }
        });
    });
</script>

DIV

<div id="notes">
</div>

我提交表单的代码(添加新注释).

My code to submit the form (adding new note).

<script type="text/javascript">
    $("#submit").click(function() {
        var note = $("#note").val();
        var cid = $("#cid").val();
        $.ajax({
            type: "POST",
            url: "ajax.php?requestid=2",
            data: { note: note, cid: cid }
        }).done(function( msg ) {
            alert(msg);
            $("#make_new_note").hide();
            $("#add").show();
            $("#cancel").hide();
            //$("#notes").load();
        });
    });
</script>

我尝试了load，但是没有用.

I tried load, but it doesn't work.

请指引我正确的方向.

推荐答案

创建一个函数来调用ajax并从ajax.php获取数据，然后在需要更新div时就调用该函数:

Create a function to call the ajax and get the data from ajax.php then just call the function whenever you need to update the div:

<script type="text/javascript">
$(document).ready(function() {
  // create a function to call the ajax and get the response
  function getResponse() {
    var cid = $('#cid').val();
    $.ajax({ //create an ajax request to load_page.php
      type: "GET",
      url: "ajax.php?requestid=1&cid=" + cid,
      dataType: "html", //expect html to be returned                
      success: function(response) {
        $("#notes").html(response);
        //alert(response);
      }

    });
  }
  getResponse(); // call the function on load


  $("#submit").click(function() {
    var note = $("#note").val();
    var cid = $("#cid").val();
    $.ajax({
      type: "POST",
      url: "ajax.php?requestid=2",
      data: {
        note: note,
        cid: cid
      }
    }).done(function(msg) {
      alert(msg);
      $("#make_new_note").hide();
      $("#add").show();
      $("#cancel").hide();}
      getResponse(); // call the function to reload the div

    });
  });
});

</script>

这篇关于表单提交后更新div内容而无需重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！