Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
142 views

JQuery Ajax Request Example in Codeigniter

This document provides a step-by-step example of sending an AJAX post request with jQuery to a CodeIgniter controller. It involves creating a database table, routes, a controller, and view. The view allows submitting a form via AJAX to add a new record. On success, it appends the data to the table. This helps demonstrate making asynchronous requests and updating pages without reloading in CodeIgniter.

Uploaded by

RaliteraToky
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
142 views

JQuery Ajax Request Example in Codeigniter

This document provides a step-by-step example of sending an AJAX post request with jQuery to a CodeIgniter controller. It involves creating a database table, routes, a controller, and view. The view allows submitting a form via AJAX to add a new record. On success, it appends the data to the table. This helps demonstrate making asynchronous requests and updating pages without reloading in CodeIgniter.

Uploaded by

RaliteraToky
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.

com

JQuery Ajax Request Example in Codeigniter


By Hardik Savani
May 9, 2018
Category : PHP
jQuery
MySql
Codeigniter
Ajax

Powered by
Valueimpression

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:

https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 1/10
14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.com

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

Read Also: PHP - I Can't get the $_POST Values on Ajax Request

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.

https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 2/10
14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.com
*
* @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

Read Also: Confirm Box Before Delete Item in Codeigniter

<!DOCTYPE html>
<html>
<head>
<title>codeigniter ajax request - itsolutionstuff.com</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 class="container">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>codeigniter ajax request - itsolutionstuff.com</h2>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-8">
<strong>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
<div class="col-lg-8">
<strong>Description:</strong>
<textarea name="description" class="form-control" placeholder="Description"></textarea>
</div>
<div class="col-lg-8">
<br/>
<button class="btn btn-success">Submit</button>
</div>
</div>

https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 3/10
14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.com
<table class="table table-bordered" 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....

Ad Join the Community

VISIT SITE

Tags : Ajax Ajax Request Codeigniter Codeigniter 3 Example GET Ajax jQuery PHP POST Ajax

https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 4/10
14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.com

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I
live in India and I love to
write
tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery,
Laravel, Codeigniter, VueJS,
AngularJS and
Bootstrap from the early stage.

Follow Me:

We are Recommending you

 Codeigniter 3 Datatables Ajax Example From Scratch

 Laravel CURL Request Example using ixudra/curl

 Laravel Ajax Request with Validation Example

 Codeigniter - Dynamic dependent dropdown using jquery ajax Example

 How to check request method is GET or POST in Laravel?

 Jquery ajax request example

 Ajax - Cross-Origin Request Blocked in Larave?

 PHP - I Can't get the $_POST Values on Ajax Request

report this ad

report this ad

Popular Posts
https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 5/10
14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.com

 How to remove specific value from php array?

 How to Solve overwrite index.php in windows wampserver ?

 Google Maps API - Simple google map with draggable marker Example

 PHP Codeigniter get last executed query example

 How to implement flash messages in PHP Codeigniter?

 How to change date format in PHP?

 Laravel 5.7 - QR Code Generator Example

 Laravel 5.5 - Validation Data Return - New Feature

 Laravel - Ajax crop image before upload using using croppie plugin

 Laravel CURL Request Example using ixudra/curl

 How to check image loaded or not in JQuery?

report this ad

Categories

Laravel PHP Angular

jQuery Bootstrap Javascript

MySql Ajax Node JS

HTML Codeigniter Vue.JS

React JS Guest Post Ubuntu

JSON Installation Git

CSS Google Map SQL

JQuery UI Google API Server

Typeahead JS Axios Socket.io

Highcharts Elasticsearch Apache

https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 6/10
14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.com

Latest Posts

 How to Get Single Row from Database in Laravel?

 How to Get Last Week Data in Laravel?

 How to Get Last 6 Months Data in Laravel?

 How to Get Last Month Data in Laravel?

 Laravel 8 Two Factor Authentication with SMS

report this ad

https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 7/10
14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.com

https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 8/10
14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.com

https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 9/10
14/10/2021 10:03 JQuery Ajax Request Example in Codeigniter - ItSolutionStuff.com

Subscribe to the Email Newsletter

Enter Your Email Address....

Follow Laravel News on

Facebook Twitter LinkedIn Github

Home List Of Categories List of Tags Disclaimer Latest Posts Contact US About US Advertisement

© 2016-2021 All Rights Reserved • www.itsolutionstuff.com

https://www.itsolutionstuff.com/post/jquery-ajax-request-example-in-codeigniterexample.html 10/10

You might also like