Home > Developer > Web Develop
To take a jquery ajax application of the small demo to facilitate the further expansion of the project, here is to note that the file name of the saved files and picture path problem ...
Ajax01.html
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Ajax Small Example </title>
<body>
<!--get the trigger button for AJAX data--
<input type= "button" value= "Get Data" class= "BTN" >
<!--let Ajax content load into the news div--
<div class= "News" >
</div><!--news-->
</body>
<script src= "Jquery-1.8.2.min.js" ></script>
<script>
$ (function () {
Specify the display and hide of Ajax start and end loaded images throughout the document
$ (document). Ajaxstart (function () {
//data is not yet loaded when the load picture shows
$ ('. Load '). Show ();
}). Ajaxstop (function () {
Load picture disappears when data loading is complete
$ ('. Load '). Hide ();
})
Trigger Ajax when the button is clicked
$ ('. btn '). Click (function () {
$.ajax ({
To get to the Ajax PHP file, remember to add random numbers back to clear the cache
URL: ' ajax01.php?t= ' + math.random (),
//type using get mode, this is to be agreed with the programmer
Type: ' GET ',
Set a network timeout, and if it has not been requested after this time, set the error report on this property.
timeout:5000,
Successful execution of a function to implement a function
Success:function (data) {
//data is the returned data, the data type is string type, then the Eval method to convert to object
var result = eval (data);
//Use the for in statement to traverse
for (var i in result) {
//Get data inserted into the element to be output
var child = $ (' <div class= ' child ' >
//Insert the element into the new box
$ ('. News '). Append (child);
}
}
Error reporting If an error occurs
Error:function (XMLHttpRequest, Textstatus, Errorthrown) {
//If the network times out, then execute the prompt
if (textstatus = = ' Timeout ') {
Alert (' Network timeout, please refresh! ‘);
}
}
});
});
});
</script>
ajax01.php
<?php
Sleep 1 seconds is to test whether the display of the load picture will be executed
Sleep (1);
Output JSON-formatted data
Echo ' [{' title ': ' First scene ', ' content ': ' I am content one '},
{"title": "Second Scene", "Content": "I am content two"},
{"title": "Third Scene", "Content": "I am content three"}] ';
?>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
