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

Question

如果您发现此问题有误，我们深表歉意。在我的网站中，我有两个div，一个div包含用户选择的图像，我已经通过Jquery预览了它。然后在 Controller 中我获取此图像并应用 Codeigniter 的翻转操作，现在我的问题是如何在不刷新整个页面的情况下加载带有翻转图像(将来自 Controller )的第二个 div？ I have three div's, how to load data in only a particular div without reloading the complete page in php-codeigniter?

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

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

Answer 1

解决了我的问题，使用 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 感谢您的帮助!