AJAX response returns html content

Question

I have an AJAX call in my codeigniter project. Here is my code:

in view :

$('#forgotPassword').click(function() {
 var base_url = '<?php echo base_url()?>'; 
 $('#forgotPasswordEmailError').text('');
 var email = $('#forgotPasswordEmail').val(); 
 console.log(email);
 if(email == ''){
 $('#forgotPasswordEmailError').text('Email is required');
 }else{
 $.ajax({
 url : base_url + 'Home/forgotPassword',
 type : 'POST',
 data : {email : email},
 success: function(data) { 
 console.log(data); 
 //location.reload();
 }
 });
 }
 });

and controller :

public function forgotPassword() { 
 $email = $this->input->post('email');
 echo $email; 
}

but the response contains only the html content from my view. I couldn't identify what is happening.

• Rotimi: What should the response be then? i.e what's the expected result
• Ferhat BAŞ: Plase replace data : {email : email}, with data : {'email' : email},
• geeth: @ankitunde i just return the email id posted fron ajax request . but it displays whole html code in my view page
• gaurav malik: put a die after echo $email; this will works like a charm.

Answer 1

change your jquery code to

$('#forgotPassword').click(function() {
 var base_url = '<?php echo base_url()?>'; 
 $('#forgotPasswordEmailError').text('');
 var email = $('#forgotPasswordEmail').val(); 
 console.log(email);
 if(email == ''){
 $('#forgotPasswordEmailError').text('Email is required');
 }else{
 $.ajax({
 url : base_url + 'Home/forgotPassword',
 type : 'POST',
 data : {email : email},
 dataType:'json',
 success: function(data) { 
 console.log(data); 
 //location.reload();
 }
 });
 }
});

change your controller code like

public function forgotPassword() { 
 $email = $this->input->post('email');
 $response = ["email" => $email];
 echo json_encode($response);
}

• Rotimi: Why use json though?? And not my upvote.. Also seems OP is just testing the response on Ajax call
• Naim Malek: because using json we can add more data to response easily in future @Akintunde
• geeth: its working. thank you. but is it necessary to set dataType in ajax function.

Answer 2

Instead of

echo $email;

use:

$response = ["email" => $email];
return json_encode($response);

And parse JSON, on client side, using JSON.parse.

• madalinivascu: you can send plain text over ajax, why use json?
• Kinshuk Lahiri: @madalinivascu Plain text can be used, but using JSON gives more idea and in future, we can add more data to response.
• geeth: i think it is not necessary to set dataType as json, because there is only one value. but anyways, its working now
• Kinshuk Lahiri: @geeth I never said that dataType as json is required. However, sending a JSON response is recommended.

Answer 3

hi maybe i can help someone, i had the same problem, in my case the error was here "url : base_url + 'Home/forgotPassword'"

in this example i have to pass all way like this url : /anotherdirectory/Home/forgotPassword.php', take a look in your "url"

$.ajax({ url : "change here fo works"', type : 'POST', data : {email : email}, dataType:'json', success: function(data) {
console.log(data);
//location.reload(); }