sending data through ajax to CI controller - php

Question

I am new to ajax and CI .I want to send data and image through ajax . In my view i have 3 input fields and one image upload button .
var val1 = $("#val1"+id).val();
var val2 = $("#val2").val();
$.ajax({
type: "POST",
url: "page/save_data",
data: "{ val1 :'"+val1+"',val2:'"+val2+"}",
success: function(msg) {
alert(msg);
}
});
and in controller when i try this it shows me nothing
function save_data()
{
$val = $this->input->post('val1');
echo $val1;
}
In console it gives me nothing .

Answer 1

Try this :
$.ajax({
type: "POST",
url: "page/save_data",
data: { "val1 ":val1,"val2": val2},
success: function(msg) {
alert(msg);
}
});

Answer 2

Your ajax URL must be refer to your method name;
...
$.ajax({
type: "POST",
url: "page/save_data", //change this to your method;
...
should be like:
...
$.ajax({
type: "POST",
url: "page/save_iudata",//or whatever your method's name;
...
EDIT:
try this way:
function save_data(){
$val1 = $_REQUEST['val1'];
echo $val1;
}

Answer 3

Hello to send data via ajax is easy:
var data = {
val1: $('#val1').val(),
val2: $('#val2').val(),
};
$.ajax({
url: "<?php echo base_url().'page/save_data'; ?>",
dataType: 'json',
type: 'POST',
async : false,
data: data,
success: function(msg){
...
}
});
return false;
But to send an image you have to do some research...
here is a good tutorial