Home > Developer > JavaScript
JQuery is an excellent lightweight javascript framework. Its slogan is: write less, do more
This example has no specific meaning, but it can be a good understanding of how to comprehensively use JQuery and ajax
Before learning this instance, make sure you have downloaded jquery. js files, and then put them in your web project (as for how to put them, I will not talk about them any more. I believe all those who have web development experience are clear)
Note: different browsers may have different effects when running this instance. It is best to run this instance on ie.
The running interface is as follows:
For method 1, I use most JQuery. ajax () functions. For method 2, I use JQuery. get () and JQuery. post () methods.
Copy the. jsp file code first:
[Html]
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
// When dom loading is complete, the ready method is called. At this time, the onclick method is added for the four buttons respectively.
$ ("# Btn1"). click (function (){
$. Ajax ({
Type: "GET", // Note:
Url: "MyServlet ",
DataType: "html ",
Success: function (data) // It is equivalent to the callback function in ajax described in the previous article. That is to say, if the request is successful, the function will be executed, where dada is the data sent from the server.
{
Alert (data );
$ ("# Div1" ).html (data); // jquery syntax, locate the tag with id div1, And put data into the tag.
}
});
});
$ ("# Btn2"). click (function (){
$. Ajax ({
Type: "POST", // send using the post method
Url: "MyServlet ",
DataType: "html", // The returned type is html.
Success: function (data)
{
// Alert (data );
$ ("# Div1" pai.html ("");
$ ("# Div1" pai.html (data );
}
});
});
$ ("# Btn3"). click (function (){
$. Get ("MyServlet", function (data ){
Alert (data );
$ ("# Div1" pai.html (data );
});
});
$ ("# Btn4"). click (function (){
$. Post ("MyServlet", function (data ){
$ ("# Div1" pai.html (data );//
});
});
});
</Script>
</Head>
<Body>
<P> method 1 </p>
<Input type = "button" id = "btn1" value = "Get content on the server"> <br>
<Input type = "button" id = "btn2" value = "Use the Post method to retrieve server content"> <br>
<Hr>
<P> method 2 </p>
<Input type = "button" id = "btn3" value = "Get server content"> <br>
<Input type = "button" id = "btn4" value = "Use the Post method to retrieve server content"> <br>
<Div id = "div1"> </div>
<Hr>
</Body>
The above code has comments, so there is no more explanation here. You can leave a message if you do not understand it.
The following describes how to write servlet code.
[Java]
Public class MyServlet extends HttpServlet
{
/**
* Destruction of the servlet. <br>
*/
Public void destroy ()
{
Super. destroy (); // Just puts "destroy" string in log
// Put your code here
}
Public void doGet (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException
{
Response. setContentType ("text/html ");
PrintWriter out = response. getWriter ();
Out. println ("Hello world ");
Out. flush ();
Out. close ();
}
Public void doPost (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException
{
System. out. println ("post method executed ");
Response. setContentType ("text/html ");
PrintWriter out = response. getWriter ();
Out. println ("Good Morning ");
Out. flush ();
Out. close ();
}
/**
* Initialization of the servlet. <br>
*
* @ Throws ServletException if an error occurs
*/
Public void init () throws ServletException
{
// Put your code here
}
}
Servlet code is relatively simple. It is nothing more than rewriting the get method and post method.
Author: yuanzeyao2008
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
