index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/
bootstrap.min.js"></script>
<script src="location.js"></script>
</head>
<body>
<div class="container">
<h2>Locations Information</h2>
<form>
<div class="form-group">
<label for="country">COUNTRY</label>
<select class="form-control" id="country">
<option>select Country</option>
</select>
</div>
<div class="form-group">
<label for="state">STATE</label>
<select class="form-control" id="state">
<option value="select">select state</option>
</select>
</div>
<div class="form-group">
<label for="district">District</label>
<select class="form-control" id="district">
<option>select district</option>
</select>
</div>
<div class="form-group">
<label for="mandal">mandal</label>
<select class="form-control" id="mandal">
<option>select Mandal</option>
</select>
</div>
<input type="button" class="btn btn-sm btn-success" value="Submit">
</form>
</div>
</body>
</html>
$(function() {
sessionStorage.setItem("id",null)
$.ajax({
url:"http://127.0.0.1:3003/country",
type: 'GET',
data:"",
// This is query string i.e. country_id=123
success:function(json)
{
var result=JSON.parse(json);
$.each(result, function(i,f)
{
$("#country").append("<option value="+f.country_id+">"
+ f.country_name + "</option>");
});
},
error: function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
$(function(){
//$('#example').DataTable();
sessionStorage.setItem("id",null)
$('#country').on("change", function () {
var country = $('#country').val();
$('#state').empty();
$('#state').append("<option>Select</option>")
alert(country);
$.ajax({
type:"GET",
url:"http://127.0.0.1:3003/state/"+country,
data:"",
success:function(json)
{
var result=JSON.parse(json);
$.each(result, function(index, item)
{
$("#state").append("<option value="+item.state_id+">"+item.state_name+ "</option>");
}); },
error: function(err)
{
alert(err);
}
});
});
});
$(function(){
sessionStorage.setItem("id",null)
$('#state').on("change", function () {
var state = $('#state').val();
$('#district').empty();
$('#district').append("<option>Select</option>")
alert(country);
$.ajax({
type:"GET",
url:"http://127.0.0.1:3003/district/"+state,
data:"",
success:function(json)
{
var result=JSON.parse(json);
$.each(result, function(index, item)
{
$("#district").append("<option value="+item.district_id+">"
+item.district_name+ "</option>");
}); },
error: function(err)
{
alert(err);
}
});
});
});
$(function(){
sessionStorage.setItem("id",null)
$('#district').on("change", function () {
var district = $('#district').val();
$('#mandal').empty();
$('#mandal').append("<option>Select</option>")
$.ajax({
type:"GET",
url:"http://127.0.0.1:3003/mandal/"+district,
data:"",
success:function(json)
{
var result=JSON.parse(json);
$.each(result, function(index, item)
{
$("#mandal").append("<option value="+item.mandal_id+">"
+item.mandal_name+ "</option>");
}); },
error: function(err)
{
alert(err);
}
});
});
});
NODE
var http = require("http");
var express = require('express');
var app = express();
var mysql = require('mysql');
var bodyParser = require('body-parser');
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT");
res.header("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept");
next();
});
//start mysql connection
var connection = mysql.createConnection({
host : 'localhost', //mysql database host name
user : 'root', //mysql database user name
password : 'root', //mysql database password
database : 'locations' //mysql database name
});
connection.connect(function(err) {
if (err) throw err
console.log('You are now connected...')
})
var server = app.listen(3003, "127.0.0.1", function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
});
app.use( bodyParser.json() ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
//rest api to get all results
app.get('/country', function (req, res) {
connection.query('select country_id,country_name from country',
function (error, results, fields) {
if (error) throw error;
res.end(JSON.stringify(results));
});
});
app.get('/state/:id',function(req,res){
connection.query('select state_id,state_name from state where country_id=?',
req.params.id,function(error,results,fields){
if(error) throw error;
res.end(JSON.stringify(results));
});
});
app.get('/district/:id',function(req,res){
connection.query('select district_id,district_name from district
where state_id=?',req.params.id,function(error,results,fields){
if(error) throw error;
res.end(JSON.stringify(results));
});
});
app.get('/mandal/:id',function(req,res){
connection.query('select mandal_id,mandal_name from mandal where
district_id=?',req.params.id,function(error,results,fields){
if(error) throw error;
res.end(JSON.stringify(results));
});
});
No comments:
Post a Comment