现在的位置: 首页 > 综合 > 正文

Ajax示例mini

2013年10月14日 ⁄ 综合 ⁄ 共 1163字 ⁄ 字号 评论关闭

Client: index.jsp

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
 function checkUser()
 {
  var username = $("#username").val();
  alert("Hello " + username);
  //$.get("/TestAjax/AjaxServer?username=" + username, null, callback);
  $.ajax({
   type: 'POST',
   url: '/TestAjax/AjaxServer',
   data: "username=" + username, // 单引号和双引号对JS来说基本上没什么区别,
   dataType: 'json', // text,xml... // 只是双引号里面不能再有双引号,可用单引号或转义符\'和&quot;等。   
   success: callback
  });
 };

 function callback(data)
 {
  alert("I\'m back " + data);
  alert(data.message + " : " + data.name);
 };

$(document).ready(function(){
  $("#username").keypress(function (){if(event.keyCode==13){checkUser();}});
 });
</script>
</head>
<body>
 <input type="text" id="username"/>
 <input type="button" value="Submit" onclick="checkUser()"/>
</body>
</html>

Server: AjaxServer.java (servlet)

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  PrintWriter out = response.getWriter();
  String username = request.getParameter("username");
  //out.println("Hi Kitty " + username); text

  // business logic
  out.println("{\"name\":\"kevin\",\"message\":\"hello\"}");
 }

 

抱歉!评论已关闭.