关于Ajax ,jQuery以及jQuery Ajax 编程（五）

最新推荐文章于 2024-03-02 11:21:12 发布

EZ127

最新推荐文章于 2024-03-02 11:21:12 发布

阅读量288

点赞数

文章标签： jquery ajax

jQuery ajax简单实例:

仍然在上篇的结构图中：

（要先行下载jQuery.js的包，然后导入，见下。百度随处可下）

servlet:

<span style="font-size:14px;">package com.jqueryAjax.test;

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;  
  
import net.sf.json.JSONArray;  
import net.sf.json.JSONObject; 

public class JqueryAjaxServer extends HttpServlet {
	 private static final long serialVersionUID = 1L; 
	 
		public void doPost(HttpServletRequest request, HttpServletResponse response)  
	            throws IOException, ServletException {  
	         
			this.doGet(request, response);  
	        }
	  
		
	    public void doGet(HttpServletRequest request, HttpServletResponse response)  
	            throws IOException, ServletException {  
	        response.setContentType("text/html;charset=utf-8");  
	        String account = request.getParameter("account");  
	          
	        JSONObject json = new JSONObject();  
	          
	        JSONArray array = new JSONArray();  
	        JSONObject member = null;  
	        for (int i = 0; i < 3; i++) {  
	            member = new JSONObject();  
	            member.put("name", "luzhu"+i);  
	            member.put("age", 20+i);  
	            array.add(member);  
	        }  
	          
	        json.put("account", account);  
	        json.put("jsonArray", array);  
	          
	        PrintWriter pw = response.getWriter();   
	        pw.print(json.toString());  
	          
	        System.out.println("json array :"+array.toString());  
	        System.out.println("json object :"+json.toString());  
	          
	        pw.close();  
	    }  
	  
	      

}</span>

web.xml配置：

<span style="font-size:14px;">   <servlet>
	   <servlet-name>JqueryAjaxServer</servlet-name>
	   <servlet-class>com.jqueryAjax.test.JqueryAjaxServer</servlet-class>
   </servlet>
	
   <servlet-mapping>
	    <servlet-name>JqueryAjaxServer</servlet-name>
	    <url-pattern>/jqueryAjax</url-pattern>
   </servlet-mapping></span>

index.jsp:

<span style="font-size:14px;"><%@ page language="java" pageEncoding="utf-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
    <html>  
    <head>  
    <title>jquery ajax</title>  
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">  
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript" src="<%=basePath%>js/jquery.js" charset="utf-8"></script>        
    <script language="javascript">  
        $(function(){  
            $('.sumbit').click(function(){  
                if($('#account').val().length==0){  
                    $('.hint').text("用户名不能位空").css({"background-color":"green"});   
                }else{  
                    $.ajax({  
                        url:'jqueryAjax',  
                        data:{account:$('#account').val()},  
                        dataType:'json', //很重要!!!.      预期服务器返回的数据类型  
                        error:function(){  
                            alert("error occured!!!");  
                        },  
                        success:function(data){  
                            $.each(data.jsonArray,function(index){  
                                $.each(data.jsonArray[index],function(key,value){  
                                    alert(key+":"+value)  
                                });  
                            });  
                              
                            $('body').append("<div>"+data.account+"</div>").css("color","red");  
                        }  
                    });  
                }  
            });  
        });  
    </script>  
    </head>  
      
    <body>  
    <h3 align="center">jquery AjaX</h3>  
    <hr>  
    <label>请做输入 ：</label>  
    <input id="account" name="account" type="text">  
    <input class="sumbit" type="button" value="检测">  
    <div class="hint"></div>  
    </body>  
    </html>  </span>

启动tomcat 键入地址：http://localhost:8080/ajax_Servlet/index.jsp

结果略了。。。。

EZ127

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Ajax ,jQuery以及jQuery Ajax 编程（五）

jQuery ajax简单实例:仍然在上篇的结构图中：（要先行下载jQuery.js的包，然后导入，见下。百度随处可下）servlet:package com.jqueryAjax.test;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletResponse;
复制链接

扫一扫