`

struts2 + jquery + json 登录、发送消息例子( jsp页面) - 4

阅读更多

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
  <script type="text/javascript">
  $(document).ready( function() {
  //使用 Ajax 的方式 判断登录
  $("#btn_login").click( function() {
   var url = 'loginAction.action';
   //获取表单值,并以json的数据形式保存到params中
   var params = {
    username:$("#username").val(),
    password:$("#password").val()
   }
   //使用$.post方式 
   $.post(
    url,  //服务器要接受的url
    params,  //传递的参数  
    function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
     //alert(data);
     var member = eval("("+data+")"); //包数据解析为json 格式 
     $('#result').html("欢迎您:  "+member.username+"<br>您的密码是:"+member.password);
    },
      'json' //数据传递的类型  json
   );
  });
 });
</script>
<title>jquery 登录</title>
 </head>
 <body>
  <center>
  <table>
  <tr>
  <td>
  <span>用户名:</span>
  </td>
  <td>
  <input type="text" id="username" name="model.username">
  </td>
  </tr>
  <tr>
  <td>
  <span>密码:</span>
  </td>
  <td>
  <input type="password" name="model.password" id="password">
  </td>
  </tr>
  <tr>
  <td colspan="2">
  <input type="button" id="btn_login" value="Login" />
  </td>
  </tr>
  </table>
  <p>
   这里显示ajax信息:
   <br />
   <span id="result"></span>
  </p>
  <p>
   <a href="message.jsp">发送消息</a>
  </p>
  </center>
 </body>
</html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics