How to load data to a particular section of the page without refreshing the whole page in 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?

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

This is view code:

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

回答1:

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 and @saddam thanks for helping!

回答2:

Edited answer to edited question.

Show the same image with jQuery in another div and look at this question for rotating the second div.

Rotate a div using javascript

来源：https://stackoverflow.com/questions/51207172/how-to-load-data-to-a-particular-section-of-the-page-without-refreshing-the-whol

标签

javascript

php

codeigniter-3