如何在不刷新php-codeigniter的整个页面的情况下将数据加载到页面的特定部分 [英] How to load data to a particular section of the page without refreshing the whole page in php-codeigniter

问题描述

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

Sorry if you find this question wrong. In my website, I have two divs, one div contains the image selected by the user, I have previewed it by Jquery. Then in controller I fetch this image and applied flip operation of Codeigniter, now my question is How to load the second div with flipped image (which will come from controller) without refreshing the whole page? I have three div's, how to load data in only a particular div without reloading the complete page in php-codeigniter?

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

I know about this link but here data is coming from database, which is not in my case. So how to call data in a particular div without loading the whole page? As I have to upload an image from controller This is my controller code:

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

JS code

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

推荐答案

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

Solved my problem, made an ajax call with JQuery:

$(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感谢您的帮助！

@ClaudiusDan and @saddam thanks for helping!

这篇关于如何在不刷新php-codeigniter的整个页面的情况下将数据加载到页面的特定部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！