Ajax学习笔记(二)——jQuery(1)

前端之家收集整理的这篇文章主要介绍了Ajax学习笔记(二)——jQuery(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天折腾了一个小例子,jsp代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>jQuery测试</title>
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
</head>
<script type="text/javascript">
$(function(){
$("#sub").click(function(){
var name=$("#userName").val();
$.ajax({
type:"post",url:"jQueryServlet",data:"name="+name,success:function(msg){
alert(msg);
}
});
});
});
</script>
<body>
用户名:
<input type="text" name="name"  id="userName"><br>
密           码:   
<input type="password" id="pwd" name="pwd"><br>
<input type="submit" value="提交" id="sub">
</body>
</html>
web.xml配置如下:
 <servlet>
  <servlet-name>jQuery</servlet-name>
  <servlet-class>Servlet.jQueryServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  <servlet-name>jQuery</servlet-name>
  <url-pattern>/jQueryServlet</url-pattern>
  </servlet-mapping>

java类如下:
package Servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class jQueryServlet extends HttpServlet{

	private static final long serialVersionUID = 1L;

public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException
{
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	response.setContentType("text/plain");
	String name=request.getParameter("name");
	PrintWriter write=response.getWriter();
	if(name.equals("itzcn"))
		write.println("恭喜您,"+name+"登录成功");
	else
		write.println("真的非常抱歉!");
}
public void doGet(HttpServletRequest request,HttpServletResponse response)  
throws IOException,ServletException {  
    this.doPost(request,response);  
}  
}

需要注意以下几点:

1、ajax中的url可以使用web.xml中配置好的映射的java类,也可以用其他html页面,js页面

2、java类一定要记得extends HttpServlet

3、如果firebug中提示返回的msg未组织好,并且alert中不能正确打印信息,这表示你应该再java类中添加这一行:response.setContentType("text/plain");,因为servlet的默认返回类型是“text/xml”或者"text/html"

4、需要在/webRoot/js目录下导入jquery-1.5.1.js文件

<script type="text/javascript" src="js/jquery-1.5.1.js"></script>

猜你在找的Ajax相关文章