JQuery Ajax Request Example in Codeigniter
In this post we will give you information about JQuery Ajax Request Example in Codeigniter. Hear we will give you detail about JQuery Ajax Request Example in CodeigniterAnd how to use it also give you demo for it if it is necessary.
In this post, i would like to share with you how to send ajax post request with data to codeigniter controller example. Here in full example we will also check for ajax request using is_ajax_request and send post request using jquery.
jQuery Ajax methods really made easy to post or get a data and return that data without refreshing the page. it’s really amazing. We will apply this jQuery Ajax post in CodeIgniter 3 project. So it will help you to make better codeigniter project.
So, in this article we will create new table “items” and then we simple list out that column in view file. then will write ajax request code and it will fire ajax post request from view file and save data in database.
So just follow bellow step and get simple example:
Step 1: Make Table
In first table we must have one table with some dummy records. For this example i created “items” table, so run bellow query:
CREATE TABLE IF NOT EXISTS 'items' (
'id' int(11) NOT NULL AUTO_INCREMENT,
'title' varchar(255) NOT NULL,
'description' varchar(255) NOT NULL,
'created_at' datetime NOT NULL,
'updated_at' datetime NOT NULL,
PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=
Step 2: Create Route
In this step we need to add one route for ajax search data and another for view. so open routes.php file and add code like as bellow:
application/config/routes.php
$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['ajax-request'] = 'ItemController/ajaxRequest';
$route['ajax-requestPost']['post'] = 'ItemController/ajaxRequestPost';
Step 3: Create Controller
In Last step we have to create ItemController Controller, in this file we will write search database logic.
So, create new ItemController.php file in controllers folder and put bellow code:
application/controllers/ItemController.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ItemController extends CI_Controller {
/**
* Get All Data from this method.
*
* @return Response
*/
public function __construct() {
parent::__construct();
$this->load->database();
}
/**
* Get All Data from this method.
*
* @return Response
*/
public function ajaxRequest()
{
$data['data'] = $this->db->get("items")->result();
$this->load->view('itemlist', $data);
}
/**
* Get All Data from this method.
*
* @return Response
*/
public function ajaxRequestPost()
{
$data = array(
'title' => $this->input->post('title'),
'description' => $this->input->post('description')
);
$this->db->insert('items', $data);
echo 'Added successfully.';
}
}
Step 4: Make View File
In second step, we have to create view file, If you installed fresh codeigniter then we need to create itemlist.php on views folder and put bellow code on that file.
application/views/itemlist.php
<!DOCTYPE html>
<html>
<head>
<title>codeigniter ajax request - onlinecode</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div >
<div >
<div >
<div >
<h2>codeigniter ajax request - onlinecode</h2>
</div>
</div>
</div>
<div >
<div >
<strong>Title:</strong>
<input type="text" name="title" placeholder="Title">
</div>
<div >
<strong>Description:</strong>
<textarea name="description" placeholder="Description"></textarea>
</div>
<div >
<br/>
<button >Submit</button>
</div>
</div>
<table style="margin-top:20px">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php foreach ($data as $item) { ?>
<tr>
<td><?php echo $item->title; ?></td>
<td><?php echo $item->description; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<script type="text/javascript">
$("button").click(function(){
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
$.ajax({
url: '/ajax-requestPost',
type: 'POST',
data: {title: title, description: description},
error: function() {
alert('Something is wrong');
},
success: function(data) {
$("tbody").append("<tr><td>"+title+"</td><td>"+description+"</td></tr>");
alert("Record added successfully");
}
});
});
</script>
</body>
</html>
Now we are ready to check, so you can check your own.
I hope it can help you….
Hope this code and post will helped you for implement JQuery Ajax Request Example in Codeigniter. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs