jquery、Ajax、struts的集成

最新推荐文章于 2024-10-01 20:12:28 发布

skytalemcc

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量373

点赞数

分类专栏： jQuery 文章标签： jquery struts ajax stylesheet user function

jQuery 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

Html代码：

<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>jquery ajax</title>
  <link rel="stylesheet" type="text/css" media="screen"
   href="screen.css" />
  <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">
  <script src="jquery.js" type="text/javascript"></script>
  <script src="json.js" type="text/javascript"></script>
  <script language="javascript">
$(document).ready(function() {
  $("#bt").click( function() {


    //$.post("send.do?method=query",
      {"account":$("#account").val()},
      //function(data) {
      //})

  $.ajax({
    type:"post",
                  url:"send.do?method=query2",
                  data: "account="+$("#account").val(),//{"account":$("#account").val()},

               success:function(data){
              var ul = eval('('+data+')');

  如果传回来的是一个对象数组，当然是json格式的，就可以循环输出。
        for(var i =0;i<ul.length;i++){
        alert(ul[i].name);
        }

//如果是一个对象那就更简单了直接ul.name;就可以了
          }
            });


  });
});
</script>
</head>

<body>
  <h3 align="center">
   jquery Ajax
  </h3>
  <hr>
  <label>
   请输入用户名：
  </label>
  <input id="account" name="account" type="text">
  <input id="bt" name="bt" type="button" value="检测">

  <div class="hint">
  </div>
  <p></p>
</body>
</html>

这是页面的内容，只要稍微理解jquery的就能看懂，还有要导入<script src="jquery.js" type="text/javascript"></script> 这个必须导入
如果要用到其他的方法，可能会导入jquery的其他插件

现在关键的是Action中的写法：

采用的是DispatchAction

Java代码：

public ActionForward query2(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
//定义一个User类（失血模型的类）属性只有id age name 和set和get方法
  User u1 = new User();
  u1.setId(1);
  u1.setAge(22);
  u1.setName("MMY");
  User u2 = new User();
  u2.setId(2);
  u2.setAge(90);
  u2.setName("MMM");
  userList.add(u1);
  userList.add(u2);
//如果你传到页面上的是一个实体对象，比如传一个user对象，就用JSONObject
  JSONObject jo = JSONObject.fromObject(u1);
//如果你要反悔一个对象数组JSONArray
  JSONArray js = new JSONArray();
  js.add(u1);
  js.add(u2);

  response.setCharacterEncoding("utf-8");
//然后out出去
//  out.println(js.toString());
  out.println(jo.toString());
  out.close();
  return null;
}
}

struts-config.xml中的配置：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">

<struts-config>
<form-beans>
<form-bean name="form" type="MyForm"></form-bean>
</form-beans>
<action-mappings>
<action path="/send"

   type="com.june.servlet.MyAction"
   scope="request"
   parameter="method"
  >

   </action>
</action-mappings>
</struts-config>

ok，这是最简单的效果，目的是先快速的掌握jquery ajax struts的集成，简单的会了，较复杂的就可以思考了