Jquery的Ajax简例

最新推荐文章于 2024-10-17 14:55:15 发布

wsldl123292

最新推荐文章于 2024-10-17 14:55:15 发布

阅读量344

点赞数

分类专栏： Web 文章标签： jquery ajax function html javascript string

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

package com.june.servlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
public class jqueryAjaxServer extends HttpServlet {
public jqueryAjaxServer(){
super();
}
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws IOException ,ServletException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String account=request.getParameter("account");
if("iamcrzay".equals(account)){
out.print("Sorry,the user is exist");
}
else{
out.print("Congratulation,this accont you can use!!!!");
}
out.close();
}
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws IOException ,ServletException {
this.doGet(request, response);
}
}
第一页用的是$.ajax()
Html代码
1. <%@ page language="java" pageEncoding="utf-8"%>
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3. <html>
4. <head>
5. <title>jquery ajax</title>
6. <meta http-equiv="pragma" content="no-cache">
7. <meta http-equiv="cache-control" content="no-cache">
8. <meta http-equiv="expires" content="0">
9. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
10. <meta http-equiv="description" content="This is my page">
11. <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
12. <script language="javascript">
13. $(function(){
14. $('.sumbit').click(function(){
15. if($('#account').val().length==0){
16. $('.hint').text("用户名不能位空").css({"background-color":"green"});
17. }
18. else{
19. $.ajax({
20. url:'jqueryAjax',
21. data:{account:$('#account').val()},
22. error:function(){
23. alert("error occured!!!");
24. },
25. success:function(data){
26. $('body').append("<div>"+data+"</div>").css("color","red");
28. }
30. });}
31. });
32. });
36. </script>
37. </head>
39. <body>
40. <h3 align="center">jquery AjaX</h3>
41. <hr>
42. <label>请输入用户名：</label>
43. <input id="account" name="account" type="text">
44. <input class="sumbit" type="button" value="检测">
45. <div class="hint">
46. </div>
47. </body>
48. </html>
第二个用的是 $.post()
Html代码
1. <%@ page language="java" pageEncoding="utf-8"%>
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3. <html>
4. <head>
5. <title>jquery ajax</title>
6. <meta http-equiv="pragma" content="no-cache">
7. <meta http-equiv="cache-control" content="no-cache">
8. <meta http-equiv="expires" content="0">
9. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
10. <meta http-equiv="description" content="This is my page">
11. <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
12. <script language="javascript">
13. $(function(){
14. $('.sumbit').click(
15. function(){
16. if($('#account').val().length==0){
17. $('.hint').text("The account is cant't be null").css({"color":"red","background-color":"yellow"});
18. }
19. else{
20. $.post("jqueryAjax","account="+$('#account').val(),function(data){
21. $('.hint').text(data).css({"color":"red","background-color":"yellow"});
22. })
23. }
24. });
25. });
26. </script>
27. </head>
29. <body>
30. <h3 align="center">jquery Ajax</h3>
31. <hr>
32. <label>请输入用户名：</label>
33. <input id="account" name="account" type="text">
34. <input class="sumbit" type="button" value="检测">
35. <div class="hint">
36. </div>
37. </body>
38. </html>
第三个是用的$.get()
Html代码
1. <%@ page pageEncoding="utf-8"%>
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3. <html>
4. <head>
5. <title>jquery get</title>
7. <meta http-equiv="pragma" content="no-cache">
8. <meta http-equiv="cache-control" content="no-cache">
9. <meta http-equiv="expires" content="0">
10. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
11. <meta http-equiv="description" content="This is my page">
12. <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
13. <script type="text/javascript">
14. $(function(){
15. $('.sumbit').click(function(){
16. if($('#account').val().length==0){
17. $('.hint').html("用户名不能位空！！！").css({"color":"#ffoo11","background":"blue"});
18. }
19. else{
20. $.get("jqueryAjax","account="+$('#account').val(),
21. function(data){
22. $('.hint').html(data).css({"color":"#ffoo11","background":"green"});
23. });
24. }
25. });
26. });
27. </script>
29. </head>
31. <body>
32. <h3 align="center">jquery AjaX</h3>
33. <hr>
34. <label>请输入用户名：</label>
35. <input id="account" name="account" type="text">
36. <input class="sumbit" type="button" value="检测">
37. <div class="hint">
38. </div>
39. </body>
40. </html>