Hello Everyone, I need to answer to this assignment: Your instructions are to de
ID: 3566423 • Letter: H
Question
Hello Everyone, I need to answer to this assignment:
Your instructions are to demonstrate a single-page design (interactive dynamic content without reloading the page) using JQuery AJAX. The bare minimum that you should implement is some type of input on the client side (like a drop down box, etc) which will provide some user input data that is used in an asynchronous GET request to retrieve dynamic content. In other words, based on some simple user data, you should make the screen content change according to that input. The purpose of this lab is to demonstrate understanding of making asynchronous calls to the server, and handling the responses. If you want to do more than the bare minimum, you can implement several different asynchronous calls that are used for different areas of your page.
Thanks.
Explanation / Answer
Ajax response get data from a server so you need to set up a server on localhost and hit some link thats running on that server. I can extend the answer and give you the example if your need it.
If you can set up your server just provide a response (usually a string response) form your url based on the name that you passed a parameter from drop down'
Do let me know if you need further help
----------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#select').change(function(){
var url = "yourlink.html?name=" // your url running on server, in the same domain
var name = $('#select').val();
url = url+name;
alert(url);
$.ajax({
url: url, // The link we are accessing.
type: "GET", // The type of request.
dataType: "html", // type of return
success: function( response ){
$('#content').append(response);
},
error: function(){
alert('Error in ajax call');
}
});
});
});
</script>
</head>
<body>
<label>Select a Scientist's Name</label><br>
<select id="select">
<option value="">------</option>
<option value="Albert_Einstein">Albert Einstein</option>
<option value="Isaac_Newton">Isaac Newton</option>
<option value="Galileo_Galilei">Galileo Galilei</option>
</select>
<br><br><hr>
<p id="content"></p>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.