ajax入门实例使用jQuery

最新推荐文章于 2022-07-29 19:48:08 发布

青年IT男

最新推荐文章于 2022-07-29 19:48:08 发布

阅读量62

点赞数

分类专栏： javascript 文章标签： ajax入门实例使用jQuery

本文链接：https://blog.csdn.net/liyong1028826685/article/details/88289119

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

下面就ajax入门做了一个简单的实例：
下面我们就开始吧

第一步：导入我们需要的jqurery.js在这里和我们myeclipse中有所不同需要我们去到工程的目录下把jqurery.js复制在我们在web目录新建的jslib目录中，这个目录用来存放我们的.js文件就是javascript脚本 jqurery.js封装了许多的js我们只需去调用就行

第二步：编写一个Servlet 在src目录中新建一个AJAXServer

public class AJAXServer extends HttpServlet{

protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}

protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try{
// request.setCharacterEncoding("UTF-8");
// response.setContentType("text/html;charset=gb18030");

httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();

Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
int temp = 0;
if (inte == null) {
temp = 1;
} else {
temp = inte.intValue() + 1;
}
httpServletRequest.getSession().setAttribute("total",temp);

//1.取参数
String old = httpServletRequest.getParameter("name");
//String name = new String(old.getBytes("iso8859-1"),"UTF-8");
String name=null;
if(!old.equals("") && (old != null))
{
name = URLDecoder.decode(old,"UTF-8");
}
//2.检查参数是否有问题
if(old == null || old.length() == 0){
out.println("用户名不能为空");
} else{
// String name = URLDecoder.decode(old,"UTF-8");
// byte[] by = old.getBytes("ISO8859-1");
// String name = new String(by,"utf-8");
// String name = URLDecoder.decode(old,"utf-8");
//3.校验操作
// String name = old;
if(name.equals("liyong")){
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
//写法没有变化，本质发生了改变
out.println("用户名[" + name + "]已经存在，请使用其他用户名, " + temp);
} else{
out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp);
}
}
} catch(Exception e){
e.printStackTrace();
}
}
}

第三步：编写一个ajax.html提供用户提交数据

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify1.js"></script>
</head>
<body>
ajax验证输入用户名：<br/>
<input type="text" id="userName" >
<input type="button" value="校验" οnclick="verify()">
<div id="result"></div>
</body>
</html>

第四步：编写上面需要的verify() js函数

//定义用户名校验
function verify()
{
//通过ID找到这个节点
var jQuryObj=$("#userName");
//获取这个节点属性值
var username=jQuryObj.val();
//使用jQuery的XMLHTTPrequest对象的get请求的封装，代码运行到这里会继续向下运行
//当服务器有数据返回的时候就去回调这个回调函数callback这里必须是函数名不能带有参数
$.get("AJAXServer?name="+username,null,callback);
// alert(username);
}
function callback(data)
{
//alert("服务器数据返回");
//alert(data);
var resultObj=$("#result");
resultObj.html(data)
}

第五步：部署运行...