NodeJs Tutorials
- NodeJs
- Install NodeJs
- Why use NodeJs
- NodeJs Process Model
- create First Application
- Run NodeJs Application
- Node.js Console
- Node.Js Modules
- URL Modules
- node.js Callback
- Node.js Events
- Upload Files
- Upload single & Multiple Files
- NodeJs File System
- NodeJs Email
- Debugging NodeJs
- .ENV
- NodeJs Mysql
- Helpers
- encription and decription in nodeJs
- Query string
- Date & Time
- Express Js
- Template Engine with Express
- MVC Pattern in Node.Js
- list of NPM Module
- Middleware
- Body Parser
- Render
- Nodemon module
- Morgan module
- Flash Message in ExpressJs
- Session
- Session store in database
- Cookies
- Helmet
- Multer
- Router: How To Use Routing In Node.Js
- App.Js
- express.json() and express.urlencoded()
- REST APIs in NodeJs
- Gloabal Objects
- Submit Form Data
- How to get Post Data in Node.js
- How to Get URL Parameters in Node.js
- How to create Node Project
- How to Insert Form Data Into the MySql Table Using Node.js
- How to fetch Data from MySQL database table using Node.js
- CRUD Example
- Await and Async
- Promises
- Login Example
- Password Encription
- How to validate Form (Form Validation) in Node.Js?
- Registration & Login form usingn Node.Js & MySql?
- Forgot & Reset Password
- File Upload in Node.Js with ExpressJs
- Resize Image Before Upload using Multer Sharp
- Upload multiple file using node.js with multer module
- Upload file using node.js with multer module
- Client IP Address
- REST API Downloading File in NodeJs
- Export and Download CSV From MySQL Database
- CRUD REST API
- CRUD REST API Example 2
- Enable HTTPS using Node
- How to send EMAIL using NodeJs?
- Dynamic dependent dropdown using NodeJs?
- Autocomplete Search
- Get and Send Data From Ajax Request
- Get and Post Data using Ajax
- Passport Authentication
- Node Js Data type
- Node Js Error
- Node Js Array Function
- Node Js String Function
- Puppeter Module
Get and Send Data From Ajax Request
Html Form
File Name :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="content">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>how to get data from ajax request in node.js</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-header">
<h2 class="text-info">how to get data from ajax request in node.js</h2>
</div>
<div class="card-body">
<div class="form-group">
<label for="country">Country</label>
<select class="form-control" id="country-dropdown">
</select>
</div>
<div class="form-group">
<label for="state">State</label>
<select class="form-control" id="state-dropdown">
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<script >
$(document).ready(function() {
function getCountryList(p1, p2) {
var country_id = this.value;
$("#country-dropdown").html('');
$.ajax({
url: "http://localhost:3000/countries-list",
type: "GET",
dataType: 'json',
success: function(result) {
$('#country-dropdown').html('<option value="">Select Country</option>');
$.each(result.countries, function(key, value) {
$("#country-dropdown").append('<option value="' + value.id + '">' + value.name + '</option>');
});
$('#city-dropdown').html('<option value="">Select Country First</option>');
}
});
}
$('#country-dropdown').on('change', function() {
var country_id = this.value;
$("#state-dropdown").html('');
$.ajax({
url: "http://localhost:3000/get-states-by-country",
type: "POST",
data: {
name: 'country',
country_id: country_id,
},
dataType: 'json',
success: function(result) {
$('#state-dropdown').html('<option value="">Select State</option>');
$.each(result.states, function(key, value) {
$("#state-dropdown").append('<option value="' + value.id + '">' + value.name + '</option>');
});
$('#city-dropdown').html('<option value="">Select State First</option>');
}
});
});
getCountryList();
});
</script>
</body>
</html>
Create server.js
File Name :server.js
var createError = require('http-errors');
var http = require('http');
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var db = require('./database');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, '/'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.get('/countries-list', function(req, res) {
db.query('SELECT * FROM countries ORDER BY id desc', function(err, rows) {
if (err) {
res.json({
msg: 'error'
});
} else {
res.json({
msg: 'success',
countries: rows
});
}
});
});
app.post('/get-states-by-country', function(req, res) {
db.query('SELECT * FROM states WHERE country_id = "' + req.body.country_id + '"',
function(err, rows, fields) {
if (err) {
res.json({
msg: 'error'
});
} else {
res.json({
msg: 'success',
states: rows
});
}
});
});
// port must be set to 8080 because incoming http requests are routed from port 80 to port 8080
app.listen(3000, function() {
console.log('Node app is running on port 3000');
});
module.exports = app;
File Name :
File Name :
File Name :
File Name :