时间戳

首页 > 解决方案 > 如何在不刷新整个页面的情况下将数据加载到页面的特定部分 php-codeigniter

javascript - 如何在不刷新整个页面的情况下将数据加载到页面的特定部分 php-codeigniter

问题描述

对不起，如果您发现这个问题是错误的。在我的网站中，我有两个 div，一个 div 包含用户选择的图像，我已经通过 Jquery 预览了它。然后在控制器中我获取此图像并应用 Codeigniter 的翻转操作，现在我的问题是如何在不刷新整个页面的情况下加载带有翻转图像（将来自控制器）的第二个 div？ 我有三个 div，如何在不重新加载 php-codeigniter 中的完整页面的情况下仅在特定 div 中加载数据？

我知道这个链接，但这里的数据来自数据库，这不是我的情况。那么如何在不加载整个页面的情况下调用特定 div 中的数据呢？因为我必须从控制器上传图像这是我的控制器代码：

$filedata = $this->upload->data();
$data['img2'] = base_url().'/assets/images/'.$filedata['file_name'];  
$this->load->view('pages/flipped',$data);

这是查看代码：

<div class="invert-grid-item invert">
<label>Upload Image</label>
<input type='file' name="userfile" size="20">
<img id="blah" src="#" alt="" />
</div>
<div class="invert-grid-item invert" id="result"></div>
<button id="uploaded_images" type="submit">Invert</button>

JS代码

<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
   .width(200)
   .height(200);        };
reader.readAsDataURL(input.files[0]);
}
}
$('#files').on('click',function(){
var files = $('#files')[0].files;
$.ajax({
url:"<?php echo base_url(); ?>pages/flip", 
method:"POST",
success:function(data)
{
 $('#uploaded_images').html(data);
 $('#result').val('');
}
})
});
</script>

标签： javascriptphpcodeigniter-3

解决方案

解决了我的问题，使用 JQuery 进行了 ajax 调用：

$(document).ready(function(){  
$('#upload_form').on('submit', function(e){  
e.preventDefault();  
if($('#userfile').val() == '')  
{  
alert("Please Select the File");  
}  
else  
{  
$.ajax({  
    url:"<?php echo base_url(); ?>pages/flip",   
    method:"POST",  
    data:new FormData(this),  
    contentType: false,  
    cache: false,  
    processData:false,  
    success:function(data)  
    {  
    $('#result').html(data);
     } 
});  
}  
});

});

@ClaudiusDan 和 @saddam 感谢您的帮助！

推荐阅读