我如何在不刷新第二个标签页的情况下加载数据？

Question

我有一页叫做章。在同一页面上有两个标签。 即（1）章节-从数据库中列出的所有章节列表。      （2）添加章节-我们可以在数据库中添加新章节。

作为当前情况从第二个选项卡（添加章节）添加新章节之后。我需要刷新整个页面才能看到添加的章节。

我想做的是从第二个选项卡（添加章节）添加数据之后。当我切换到第一个标签时（第8章），我应该能够看到已添加的章节，而无需刷新页面。

代码如下（用于添加章节）

$(document).ready(function () {
   // alert("hi");
    $("#category-form").validate({
        /* validation rule start */
        rules: {
            bni_chapter_id: {
                required: true,
                number: true,
            },
            bni_chapter_name: {
                required: true,
            },

        },
        /* validation rule end */
        /* validation message start */
        messages: {
            bni_chapter_id: {
                required: "<font color='#f9676b' style='font-family:inherit'>Enter category Id</font>",
                number: "<font color='#f9676b' style='font-family:inherit'>Enter Only Digit</font>",
            },
            bni_chapter_name: {
                required: "<font color='#f9676b' style='font-family:inherit'>Enter category Name </font>",
            },

        },
        /* validation message end */
        /* if all ok than submitHandler call */
        submitHandler: function (form) {
            event.preventDefault();

            var bni_chapter_id = $("#bni_chapter_id").val();
            var bni_chapter_name = $("#bni_chapter_name").val();

            $.ajax({
                url: "phpfile/chapter.php",
                type: "post",
                cache: false,
                data: {
                    bni_chapter_id: bni_chapter_id,
                    bni_chapter_name: bni_chapter_name,

                },
                beforeSend: function () {

                    $("#infobtn").click();
                },
                success: function (data) {
                  //  alert('dd');
                    $("#added").html("Chapter Added !!");
                    $("#category-form")[0].reset();
                    console.log("success");
                    //  console.log("success");
                    /* succesfully login */
                    //if(data.indexOf("done")>=0){
                    //  console.log("success");
                    //  $("#successbtn").click();
                    //  $("#chapter-form")[0].reset();
                    //}
                    ///* any other condition */
                    //else{
                    //  $("#errorbtn").click();
                    //}
                }
            });
        }
    });
});

我列出章节的代码是

// JavaScript Document
var tempScrollTop;

function pos() {
    $(window).scrollTop(tempScrollTop);
}
var editFun;
$(document).ready(function () {
    editFun = function(){

        $('.edit_data').click(function(){

            var employee_id=$(this).attr("id");
            $.ajax({
                url:"phpfile/editchaptermodal.php",
                method: "post",
                data:{employee_id: employee_id},
                success: function(data){
                    $('#employee_detail').html(data);
                    $('#dataModal').modal("show");
                }
            });
        });
       }

    $(document).on('click', '.btn_delete', function(){  
        // var id=$(this).data("id3");

         var el = this;
     var id = this.id;
     var splitid = id.split("_");

     // Delete id
     var deleteid = splitid[1];  
        if(confirm("Are you sure you want to delete this?"))  
        {  
             $.ajax({  
                  url:"phpfile/delete.php",  
                  method:"POST",  
                  data:{id:id},  
                  dataType:"text",  
                  success:function(data){  
                        $(el).closest('tr').css('background','#d31027');
             $(el).closest('tr').fadeOut(800, function(){      
                 $(this).remove();
             });  

                  }  
             });  
        }  
   }); 
    //page scrolling code
    function getresult(url, searches) {
        //alert($('input[name="status"]:checked').val());
        $.ajax({
            url: url,
            type: "get",
            data: {
                delban: "",
                upban: ""
            },
            beforeSend: function () {
                $("#myModal").modal("show");
            },
            complete: function () {
                $("#myModal").modal("hide");
            },
            success: function (data) {
                //alert(data);
                if (searches) {
                    $("#rows").html(data);
                } else if (data.indexOf("No records found") < 0) {
                    $("#rows").append(data);
                } else {
                    //error code
                    //  $("#rows").append(data);
                }
            },
            error: function () {
            }
        });
    }

    getresult('phpfile/chapter1.php?rand=' + Math.random() + '&page=' + 1, false);

    $(window).scroll(function () {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 5) {
            if ($("#pagenum:last").val() <= $("#total-page").val()) {
                var pagenum = parseInt($(".pagenum:last").val()) + 1;
                getresult('phpfile/chapter1.php?rand=' + Math.random() + '&page=' + pagenum, false);
            }
        }
    });
    //page scrolling end
});