How to make web api call in HTML page
<html lang='en'>
<head>
<title>Ankapur Chicken New year Combo</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>
</head>
<body>
<style type="text/css">
.bgimg {
background-image: url('http://ankaprchicken.com/newyeariages/sankranthi-image-1.png');
}
</style>
<div class="container-fluid" id="navBox">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="http://www.ankaprchicken.com"><img src="http://ankaprchicken.com/logo/logo.png" height="68">
</a></div><a href="http://www.ankapurchicken.com">
</a><div class="col-xlg-8 col-lg-8 col-md-8 col-sm-6 col-xs-12 text-right navLinksBox hidden-xs hidden-sm" style="margin-top: 25px;">
<span class="navLinks">
<a href="" target="_blank" class="navLink" style="color: #000000;font-weight: 700;margin-top: 28px;"> Call Us:040-66883883</a>
</span>
<span class="navLinks">
<a href="http://orders.ankaprchicken.com/Home" target="_blank" class="navLink" style="color: #000000;font-weight: 700;margin-top: 28px;">Explore More</a>
</span>
</div>
</div>
</div>
</div>
<div class="container-fluid bgimg" style="height: 500;">
<div class="row " >
<div><center>
<p style="margin-top: 230px;color: white;font-weight: 1000;font-size: 30px;">“ HEARTLY WELCOME TO ANKAPUR CHICKEN’S FAMILY ”
</p>
<!-- <p style="font-weight: 800;font-size: 30px;background: white;padding-left: 10px;"> ORDERS ARE OPEN TILL JAN 3rd 6PM </p> -->
</center></div> </div></div>
<div class="row" style="color:white; height: 200px;" >
<!-- <div class="col-sm-5 col-md-6" > -->
<div style="color: b20b14;">
<center> <p style="font-weight: 900; font-size: 31px;margin-top: 50px; ">STOP WAITING & START ORDERING</p></center>
<!-- <p style=" margin-left: 99px; font-size: 20px; margin-top: 20px; "> Order now and get exciting gifts from Ankapur Chicken. </p> -->
<!-- <button style="font-size: 20px; background-color: white; padding: 15px;text-align: center;text-decoration: none; display: inline-block; font-size: 16px; margin: 42px 224px;border-radius: 46px;border-radius: red;font-weight:600"> Grab it</button> -->
</div>
<!-- </div> -->
<!-- <div class="col-sm-2 col-sm-offset-2 col-md-3 col-md-offset-0"style=" padding-left: 90px;" >
<!-- <img src="http://ankapurchicken.com/newyearimages/gift-image.png"/>
</div> -->
</div>
<div class="row" style="background-color:#141519;">
<div style="color:white">
<center><p style="font-size: 41px;font-weight: 600;margin-top: 80px;">Sankranti SPECIAL COMBOS</p></center>
</div>
<div class="row"> <button type="button" style="font-size: 20px; background-color: white; padding: 15px;text-align: center;text-decoration: none; display: inline-block; font-size: 16px; margin: 42px 224px;border-radius: 46px;border-radius: red;font-weight:600" data-toggle="modal" onclick="kansiris('combo1')" data-target="#myModal">Order Now</button>
</div></div>
<div class="row"> <button type="button" style="font-size: 20px; background-color: white; padding: 15px;text-align: center;text-decoration: none; display: inline-block; font-size: 16px; margin: 42px 224px;border-radius: 46px;border-radius: red;font-weight:600" data-toggle="modal" onclick="kansiris('combo2')" data-target="#myModal">Order Now</button>
</div></div>
</div>
<div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Please enter your Details</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<input type='hidden' name='offer' id='offer' value=''/>
<div class="col-sm-2">
<label>Name<label/></div>
<div class="col-sm-4"> <input id="txtname" id=txtname placeholder="Name"/></div>
</label>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-2"> <label>Phone Nomber<label/></div>
<div class="col-sm-4"> <input id="txtphone" id=txtphone placeholder="Phone Number"/></div>
</div>
</div>
<div class="container">
<div class="row"> <div class="col-sm-2"><label>Address<label/></div>
<div class="col-sm-4"> <textarea rows="4" cols="50" id="descrption" name="descrption" style="width: 90%;" placeholder="Address"> </textarea></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-2"> <p>Combo Price: ₹4999/-</p>
<p>Including GST</p>
<p>Delivery Charges: ₹70/-</p>
<p>Total Amount: ₹5069/-</p>
</div></div></div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<button class="btn btn-danger btn-lg" type="button" id="submit" value="submit" name="submit">Submit</button>
<!-- <button style="color: #b20b14;font-size: 20px;background-color: white;border-radius: 46px;border-radius: red;font-weight:600;" id="rzp-button1"> Pay Now </button> -->
</div></div></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" class="btn btn-info btn-lg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
function kansiris(val){ $('#combotype').val(val);}
</script>
<!-- <script>
var options = {
//"key": "W09eYwUgy9DAI0",
"key": "3OHEkrM9aPMz5u",
"amount": "506900", // 2000 paise = INR 20
"name": $('#name').val(),
"description": "Ankaur Chicken",
"image": "http://ankaurchicken.com/logo/logo.png",
// "order_id": "@ViewBag.orderid",
"handler": function (response){
//alert(response.razorpay_payment_id);
//alert(response.razorpay_order_id);
//alert(response.razorpay_signature);
var payment = response.razorpay_payment_id;
// var razorpayment = response.razorpay_order_id;
// var razorsignat = response.razorpay_signature;
var name = $("#name").val();
var combotype = $("#combotype").val();
var Phonenumber = $("#Phonenumber").val();
var address = $("#Address").val();
// var statusid = 1;
var promo = "ANK5";
//$("#txtpromo").val();
//if (clickedvalue == 'confirmorder') {
//var sit ={customerPhone: Phonenumber,customerName: name,promo: promo,transactionid:payment,CustomerRequest:combotype}
var headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
headers.append('Accept', 'application/json');
headers.append('content-type', 'application/json');
//let options = new RequestOptions({ headers: headers, withCredentials: true });
var url="http://test.ankaprchicken.com/api/GetOrderDetails/Comboorder?customerPhone='+Phonenumber+'&&customerName='+name+'&&transactionid='+payment+'&&CustomerRequest='+combotype+'&&Totalamount='+5069+'&&delocation='+address"
$.ajax({
// url:'http://localhost:51196/api/GetOrderDetails/Comboorder?customerPhone='+Phonenumber+'&&customerName='+name+'&&transactionid='+payment+'&&CustomerRequest='+combotype+'&&Totalamount='+5069+'&&delocation='+address,
url:url,
// url:'http://test.ankaprchicken.com/api/GetOrderDetails/Comboorder?customerPhone='+Phonenumber+'&&customerName='+name+'&&transactionid='+payment+'&&CustomerRequest='+combotype+'&&Totalamount='+5069+'&&delocation='+address,
// url: 'http://localhost:51196/api/GetOrderDetails/Comboorder',
// type: 'Get',
type:'POST',
// data:orderid,
// data: JSON.stringify({ ksc:sit }),
headers: {
'Accept': 'application/json',
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
//'Authorization': 'Bearer ' + accessToken
},
dataType: 'json',
contentType: 'application/json',
success: function (data) {
alert("Your Order is Placed Successfully.");
location.reload();
},
error: function (data) {
alert("Error in placing the order.");
}
});
},
"prefill": {
"name": "xxxxx",
"email": "xxxx@xxx.xxx"
},
"notes": {
"address": $("#name").val(),
"order_id": "Ankapur Chicken",
//"transaction_id": "your transaction_id",
//"Receipt": "your_receipt_id"
},
"theme": {
"color": "#F37254"
}
};
var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function (e) {
if ($("#keepsign").prop("checked") == false) {
// alertify.alert("Please accept terms and conditions");
$("body").overhang({
type: "warn",
message: "Please accept terms and conditions.",
//closeConfirm: "true",
duration: 10,
overlay: true
});
$("#keepsign").focus();
}
else {
rzp1.open();
e.preventDefault();
}
}
</script> -->
<script type="text/javascript">
//combo functionality
$('#submit').on("click", function () {
var Name = $("#txtname").val();
var CustomerPhonenumber = $("#txtphone").val();
var option = $("#offer").val();
var email = $("#txtemail").val();
var descrption = $("#descrption").val();
var headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
headers.append('Accept', 'application/json');
headers.append('content-type', 'application/json');
//let options = new RequestOptions({ headers: headers, withCredentials: true });
var url = "http://test.kansiris.com/api/Getorderdetails/SendEmail?name=" + Name + "&email=" + email + "&Phone=" + CustomerPhonenumber + "&option=" + option + "&description=" + descrption + "";
// var url = "http://localhost:51196/api/Getorderdetails/SendEmail?name=" + Name + "&email=" + email + "&Phone=" + CustomerPhonenumber + "&option=" + option + "&description=" + descrption + "";
$.ajax({
url: url,
dataType: 'JSONP',
jsonpCallback: 'callbackFnc',
type: 'GET',
async: false,
crossDomain: true,
success: function () { },
failure: function () { },
complete: function (data) {
if (data.readyState == '4' && data.status == '200') {
//errorLog.push({ IP: Host, Status: 'SUCCESS' })
alert("Order request Sucessfully sent");
window.location.href = "http://ankaurchicken.com/";
}
else {
//errorLog.push({ IP: Host, Status: 'FAIL' })
alert("failed");
}
}
});
/*$.get( "http://test.kansiris.com/api/Getorderdetails/SendEmail?name=" + Name + "&email=" +email+"&Phone=" + CustomerPhonenumber + "&option=" + option + "&description=" + descrption + "", function( data ) {
alert(data);
});*/
});
//combo functionality end
</script>
<script>
</script>
</html>
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.