Jquery将文本从文件加载到div中重新加载页面

我需要在一个模态中的div中加载一个文本表单文件

“file.txt”位于txt_文件文件夹中

在我的索引中，我有这个jquery代码

$('#modal-div').on('show.bs.modal', function (event) {
   var handler = $(event.relatedTarget); 
   var objData = handler.data();

   $('.div-for-text').load('path/to/file'+handler.data('contract'),function(){
        console.log('ok, done loading file');
    });
});

全部包装在一个

$（document）.load（function（）{}）中

handler.data是一个数据标记，位于加载模式的按钮内。它包含文件名（file.txt）

对于final，这是需要在model中填充文本数据的div：

<p class="div-for-text">
  <!--Load Text Here-->
 </p>




当我尝试加载模态并触发我在控制台中看到的函数时，ok，完成加载文件。但是所有页面都会重新加载，而div不会被填充

我试图在load回调函数中添加event.preventDefault（），但它不起作用

有人也有同样的问题？
感谢所有帮助
您可以使用AJAX获取文件，然后使用其内容更新您的
。我还没有对此进行测试，但它应该可以工作：

$('#modal-div').on('show.bs.modal', function (event) {
    $.ajax({
        url : "file.txt",
        dataType: "text",
        success : function (data) {
            $(".div-for-text").html(data);
        }
    });
});

您可以使用AJAX获取文件，然后使用其内容更新您的
。我还没有对此进行测试，但它应该可以工作：

$('#modal-div').on('show.bs.modal', function (event) {
    $.ajax({
        url : "file.txt",
        dataType: "text",
        success : function (data) {
            $(".div-for-text").html(data);
        }
    });
});

您应该在
.on（）
回调函数中运行
事件.preventDefault（）
，而不是
.load（）
回调函数代码

$('#modal-div').on('show.bs.modal', function (event) {
   // HERE
   event.preventDefault()

   var handler = $(event.relatedTarget); 
   var objData = handler.data();

   $('.div-for-text').load('path/to/file'+handler.data('contract'),function(){
        console.log('ok, done loading file');
        // NOT HERE
    });
});

您应该在
.on（）
回调函数中运行
事件.preventDefault（）
，而不是
.load（）
回调函数代码

$('#modal-div').on('show.bs.modal', function (event) {
   // HERE
   event.preventDefault()

   var handler = $(event.relatedTarget); 
   var objData = handler.data();

   $('.div-for-text').load('path/to/file'+handler.data('contract'),function(){
        console.log('ok, done loading file');
        // NOT HERE
    });
});