<!DOCTYPE html>
<head>
<title> Learning how to access elements from</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(".udc").load("hello.txt", function(responseText, statusTxt, xhr) {
console.log(responseText);
console.log(statusTxt);
console.log(xhr);
});
});
$("#getbtn").click(function(){
$.get("sum.php",{"a":13,"b":45},function(data,status) {
alert(data.sum);
});
});
$("#postbtn").click(function(){
/*
validation
var data = {"a":$("#n1").val(),"b":$("#n2").val()};
var data = {};
data.a = $("#n1").val();
data.b = $("#n2").val();
data
*/
$.post("sumpost.php",{"a":13,"b":45},function(data,status) {
alert(data.sum);
});
});
$("#ajaxbtn").click(function(){
$.ajax({
url: "sumpost.php",
type: "post",
data: {"a":13,"b":45},
success: function(data, status, xhr) {
alert(data.sum);
},
error: function (jqXhr, textStatus, errorMessage){
alert("error: "+errorMessage);
}
});
});
});
</script>
</head>
<body>
<div class="udc"></div>
<button id="btn">Click here.</button>
<button id="getbtn">Get</button>
<button id="postbtn">Post</button>
<button id="ajaxbtn">Ajax</button>
</body>
</html> |
|
Server
Hello From Server
post:
<?php
$a = $_POST["a"];
$b = $_POST["b"];
$c = $a + $b;
$student_one = array("sum"=>$c);
header('Content-Type: application/json');
echo json_encode($student_one);
?>
|
