jsp+jquery+ajax+json 实例

最新推荐文章于 2021-08-06 13:43:18 发布

slio2008

最新推荐文章于 2021-08-06 13:43:18 发布

阅读量1w

点赞数 3

分类专栏： java J2EE周边文章标签： json ajax jsp jquery function import

本文链接：https://blog.csdn.net/slio2008/article/details/6954776

版权

J2EE周边同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

java

1 篇文章 0 订阅

订阅专栏

index.jsp页面代码

<%@ 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>

Output.jsp

<%@ 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>

所需的JAR和JS

jar------------

JS---------

不知道怎么上传附件  呵呵。。。。

slio2008

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录