Scribd
Upload
10 views

Programs FSD-1

Uploaded by

1ep21is106.ise
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Programs FSD-1

Uploaded by

1ep21is106.ise
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Develop a registration page for student enrollment without page refresh using AJAX (10m)

HTML & JavaScript (registration.html):


1. Create the Form:
<!DOCTYPE html>
<html>
<head>
<title>Student Registration</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('registration-form').addEventListener('submit',
function(e) {
e.preventDefault(); // Prevent default form submission
fetch('/register/', {
method: 'POST',
headers: {
'X-CSRFToken': '{{ csrf_token }}', // CSRF protection
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams(new FormData(this)).toString()
})
.then(response => response.text())
.then(data => {
document.getElementById('response').innerHTML = data; // Display response
})
.catch(error => console.error('Error:', error));
});
});
</script>
</head>
<body>
<form id="registration-form">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<button type="submit">Register</button>
</form>
<div id="response"></div>
</body>
</html>
2. Django View (views.py):
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def register(request):
if request.method == 'POST':
name = request.POST.get('name')
email = request.POST.get('email')
# Process registration (e.g., save to database)
return HttpResponse(f"Registered {name} with email {email}")
return HttpResponse("Invalid request", status=400)
3. Django URL Configuration (urls.py):
from django.urls import path
from .views import register
urlpatterns = [
path('register/', register, name='register'),
]
• The form submission uses JavaScript's fetch API to send data to the server without
refreshing the page.
• CSRF protection is included by sending the CSRF token.
Develop a search application in Django using AJAX that displays courses enrolled by a student
being searched (10m)
HTML & JavaScript (search.html):
1. Create the Search Input:
<!DOCTYPE html>
<html>
<head>
<title>Student Search</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('search').addEventListener('input', function() {
fetch(`/search/?q=${this.value}`)
.then(response => response.json())
.then(data => {
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = data.courses.map(course =>
`<p>${course}</p>`).join('');
})
.catch(error => console.error('Error:', error));
});
});
</script>
</head>
<body>
<input type="text" id="search" placeholder="Search for student">
<div id="results"></div>
</body>
</html>
2. Django View (views.py):
from django.http import JsonResponse
from .models import Student
def search(request):
query = request.GET.get('q', '')
courses = []
if query:
student = Student.objects.filter(name__icontains=query).first()
if student:
courses = list(student.courses.values_list('name', flat=True))
return JsonResponse({'courses': courses})
3. Django URL Configuration (urls.py):
from django.urls import path
from .views import search
urlpatterns = [
path('search/', search, name='search'),
]

❖ The search feature uses AJAX to fetch and display data without a page refresh.

❖ The server responds with JSON data, which is processed by JavaScript to update the page

content dynamically.

XHTML REQUEST AND RESPONSE

❖ XHTML (Extensible Hypertext Markup Language) is a stricter version of HTML,

designed to be more compliant with XML standards.

❖ It enforces rules that HTML does not, such as requiring all tags to be properly closed

and nested.

HTTP Request and Response in XHTML:


1. HTTP Request:

❖ A request sent from the client (usually a web browser) to the server to retrieve or
send data.
Components:
1. Method: Determines the action (GET, POST, etc.).
2. URL: Specifies the resource.
3. Headers: Includes metadata (e.g., Accept, Content-Type).
4. Body: Data sent with the request (e.g., form data for POST requests).

Example:
GET /page.html HTTP/1.1
Host: www.example.com
Accept: application/xhtml+xml

2. HTTP Response:

❖ The server's reply to the client's request, containing the requested resource or an

error message.
Components:
1. Status Code: Indicates the result (e.g., 200 OK, 404 Not Found).
2. Headers: Metadata about the response (e.g., Content-Type).
3. Body: The content (e.g., XHTML document).

Example:
HTTP/1.1 200 OK
Content-Type: application/xhtml+xml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Example Page</title></head>
<body><h1>Hello, world!</h1></body>
</html>
❖ XHTML must adhere to XML syntax rules.

❖ HTTP requests and responses are the same for XHTML as for HTML but ensure XHTML

content is well-formed XML.

You might also like