没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
43页
JQuery Tutorialspoint AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data from the server without a browser page refresh. recommend you go through our Ajax Tutorial before proceeding further
资源推荐
资源详情
资源评论
jQuery
i
jQuery
222
AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology
helps us to load data from the server without a browser page refresh.
If you are new with AJAX, I would recommend you go through our Ajax Tutorial before
proceeding further.
JQuery is a great tool which provides a rich set of AJAX methods to develop next generation
web application.
Loading Simple Data
This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides
load() method to do the job:
Syntax
Here is the simple syntax for load() method:
[selector].load( URL, [data], [callback] );
Here is the description of all the parameters:
URL: The URL of the server-side resource to which the request is sent. It could be
a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a
database.
data: This optional parameter represents an object whose properties are serialized
into properly encoded parameters to be passed to the request. If specified, the
request is made using the POST method. If omitted, the GET method is used.
callback: A callback function invoked after the response data has been loaded into
the elements of the matched set. The first parameter passed to this function is the
response text received from the server and second parameter is the status code.
Example
Consider the following HTML file with a small JQuery coding:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
9. AJAX
jQuery
223
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After
loading this file, all the content would be populated inside <div> tagged with ID stage.
Assuming, our /jquery/result.html file has just one HTML line:
<h1>THIS IS RESULT...</h1>
When you click the given button, then result.html file gets loaded.
Click on the button to load result.html file
Getting JSON Data
There would be a situation when server would return JSON string against your request.
JQuery utility function getJSON() parses the returned JSON string and makes the
resulting string available to the callback function as first parameter to take further action.
Syntax
Here is the simple syntax for getJSON() method:
[selector].getJSON( URL, [data], [callback] );
Here is the description of all the parameters:
URL: The URL of the server-side resource contacted via the GET method.
jQuery
224
Data: An object whose properties serve as the name/value pairs used to construct
a query string to be appended to the URL, or a preformatted and encoded query
string.
Callback: A function invoked when the request completes. The data value resulting
from digesting the response body as a JSON string is passed as the first parameter
to this callback, and the status as the second.
Example
Consider the following HTML file with a small JQuery coding:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
Here JQuery utility method getJSON() initiates an Ajax request to the specified
URL/jquery/result.json file. After loading this file, all the content would be passed to
the callback function which finally would be populated inside <div> tagged with ID stage.
Assuming, our /jquery/result.json file has following json formatted content:
jQuery
225
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}
When you click the given button, then result.html file gets loaded.
Click on the button to load result.html file
Passing Data to the Server
Many times you collect input from the user and you pass that input to the server for further
processing. JQuery AJAX made it easy enough to pass collected data to the server using
data parameter of any available Ajax method.
Example
This example demonstrates how user can pass input to a web server script which would
send the same result back and we would print it:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type="input" id="name" size="40" /><br />
剩余42页未读,继续阅读
资源评论
syongnuaa
- 粉丝: 0
- 资源: 22
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功