Lab Session 13

Web Engineering
Department of CS and SE
LAB SESSION 13: AJAX WITH PHP
Objective
On completion of this lab, students will be able:
• To update website asynchronously using AJAX.

• To improve the speed and performance of the website.
AJAX Introduction
AJAX is a developer's dream, because you can:
 Read data from a web server - after the page has loaded
 Update a web page without reloading the page
 Send data to a web server - in the background
AJAX is a developer's dream, because you can:
 Read data from a web server - after the page has loaded
 Update a web page without reloading the page
 Send data to a web server - in the background
AJAX updated parts of a web page, without reloading the whole page.
How AJAX Works
Web Engineering
How to send data using Ajax.

Index.php
<!DOCTYPE html>
<html>
<head>
<title>Php Ajax Form Validation Example</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Php Ajax Form Validation Example</h1>
<form role="form" id="contactForm" class="contact-form" data-toggle="validator" class="shake">
<div class="alert alert-danger display-error" style="display: none">
</div>
<div class="form-group">
<div class="controls">
<input type="text" id="name" class="form-control" placeholder="Name">
</div>
</div>
<input type="email" class="email form-control" id="email" placeholder="Email" >
</div>
</div>
<input type="text" id="msg_subject" class="form-control" placeholder="Subject" >
</div>
</div>
<textarea id="message" rows="7" placeholder="Massage" class="form-control"></textarea>
</div>
</div>
<button type="submit" id="submit" class="btn btn-success"><i class="fa fa-check"></i> Send
Message</button>
</form>
</div>
Web Engineering
</body>
<script type="text/javascript">
$(document).ready (function () {
$('#submit').click (function (e){
e.preventDefault ();
var name = $("#name").val();
var email = $("#email").val();
var msg_subject = $("#msg_subject").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "/formProcess.php",
dataType: "json",
data: {name:name, email:email, msg_subject:msg_subject, message:message},
success : function(data){
if (data.code == "200"){
alert("Success: " +data.msg);
} else {
$(".display-error").html("<ul>"+data.msg+"</ul>");
$(".display-error").css("display","block");
} } }); }); });</script></html>
Form_Procss.php
<?php
$errorMSG = "";
/* NAME */
if (empty($_POST["name"])) {
$errorMSG = "<li>Name is required</<li>";
} else {
$name = $_POST["name"];
}
/* EMAIL */
if (empty($_POST["email"])) {
$errorMSG .= "<li>Email is required</li>";
} else if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
$errorMSG .= "<li>Invalid email format</li>";
}else {
$email = $_POST["email"];
}
/* MSG SUBJECT */
if (empty($_POST["msg_subject"])) {
Web Engineering
$errorMSG .= "<li>Subject is required</li>";

} else {
$msg_subject = $_POST["msg_subject"];
}
/* MESSAGE */
if (empty($_POST["message"])) {
$errorMSG .= "<li>Message is required</li>";
} else {
$message = $_POST["message"];
}
if(empty($errorMSG)){
$msg = "Name: ".$name.", Email: ".$email.", Subject:
".$msg_subject.", Message:".$message;
echo
json_encode(['code'=>200,
'msg'=>$msg]); exit;
}
echo json_encode(['code'=>404, 'msg'=>$errorMSG]); ?>
Lab Task
In this lab, we learn how to implement AJAX.
1. Send a request to PHP page through AJAX.

2. Create a folder name ajax in htdocs, and inside it create a page requestpage.php
3. Create another page ajaxtest.html
4. Create a page name ajax.js
5. When ajaxtest.html will load on browser and by clicking on
send request, requestpage.php contents will display on the page
requestpage.php file
<?php
echo“Hello World!, AJAX is working on my page”;
?>
without refreshing of the page.
ajaxtest.html file
<! DOCTYPE html>
<html> <head> <title>AJAX</title> </head>
<body>
<a href=”javascript:request(‘requestpage.php’, ‘responseDiv’)”>Send
Request</a>
<div id=”responseDiv”></div>
</body> </html>

Lab Session 13

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Lab Session 13

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Session 13

Uploaded by

Copyright:

Available Formats

Web Engineering

LAB SESSION 13: AJAX WITH PHP

• To update website asynchronously using AJAX.

AJAX is a developer's dream, because you can:

AJAX is a developer's dream, because you can:

How to send data using Ajax.

$errorMSG .= "<li>Subject is required</li>";

1. Send a request to PHP page through AJAX.

without refreshing of the page.

You might also like