jsp+jquery+ajax+json 实例

最新推荐文章于 2024-04-23 00:29:43 发布

谦虚使人发胖

最新推荐文章于 2024-04-23 00:29:43 发布

阅读量7.2k

点赞数 2

分类专栏： jsp与js

jsp与js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<span style="font-size:14px;"><span style="color:#ff0000;">index.jsp页面代码</span>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
   
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
     <title>My JSP 'index.jsp' starting page</title>  
    <script type="text/javascript" language="javascript" src="js/jquery-1.6.js"></script>  
<script type="text/javascript">  
  function CheckAjax ()  
  {  
 if($('#username').val().length==0){    
                   $('.hint').text("用户名不能位空").css({"background-color":"green"});     
               }    
               else{    
                    alert($('#username').val());  
    $.ajax({  
            type: "get",//使用post方法访问后台  
            dataType: "json",//返回json格式的数据  
            url: "Output.jsp",//要访问的后台地址  
            contentType: "application/json;charset=utf-8",  
            data: {username:$('#username').val()},//要发送的数据  
            beforeSend: function() {  
            $("span").html("<font color='red'>ajax数据处理中,请稍后...</font>");},  
              
           complete :function(){$("span").html("<font color='red'>ajax数据处理完毕</font>");},//AJAX请求完成时  
            success: function(data){//data为返回的数据，在这里做数据绑定  
                 //jsonArray数组 用each遍历  
                    $.each(data.jsonArray,function(index){    
                     $.each(data.jsonArray[index],function(key,value){    
                                alert(key+":"+value)   
                                 $('body').append("<div>"+key+"---"+value+"</div>").css("color","red");     
                                       });    
                        });    
                            
                    //单个字符串输出    
                    $('body').append("<div>"+data.account+"</div>").css("color","red");    
                },  
             error: function(XMLResponse) {alert(XMLResponse.responseText)}  
                });  
                
                }  
  }  
</script>  
  </head>  
    
  <body>  
     <table><tr><td>  
     <input type="text" id="username" name="username" title="username" οnblur="CheckAjax();" >  
     </td></tr>  
     <tr><td>  
       <div class="hint">   </div>   
     </td></tr>  
       
     <tr><td>  
     <span></span>  
     </td></tr>  
     </table>  
  </body>  
</html>  </span>

<span style="font-size:14px;"><span style="color:#ff0000;">Out.jsp</span>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%@ page import="net.sf.json.*,java.io.*" %>  
  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    
      
    <title>My JSP 'Output.jsp' starting page</title>  
      
      
  </head>  
    
  <body>  
     <%  
        
  response.setContentType("text/html;charset=utf-8");    
  String account = request.getParameter("username");    
      
  JSONObject json = new JSONObject();    
      
  JSONArray array = new JSONArray();    
  JSONObject member = null;    
  for (int i = 1; i < 2; i++) {    
      member = new JSONObject();    
      member.put("name", "xiaohua"+i);    
      member.put("age",new Integer(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();    
   
  
      
  %>  
  </body>  
</html>  </span>

所需的JAR包和JS包

JAR包

JS包

谦虚使人发胖

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jsp+jquery+ajax+json 实例

index.jsp页面代码 My JSP 'index.jsp' starting page function CheckAjax () { if($('#username').val().length==0){ $('.hint').text("用户名不能位
复制链接

扫一扫

专栏目录