使用jquery处理一般数据（四）

最新推荐文章于 2024-07-25 12:41:07 发布

dabizime

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量260

点赞数

分类专栏： Ajax 文章标签： jquery function xmlhttprequest url integer ajax

本文链接：https://blog.csdn.net/dabizime/article/details/5490061

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先写一个html user.html 都需要导入jquery.js 和自己手写的js validate.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>用户校验ajax实例</title>
     
     
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/validate.js"></script>
</head>
<body>
    用户名校验AJAX实例，请输入用户名：</br>
    <input type="text" id="userName"><br>
    <input type="button" value="检查" οnclick="validate()">
    
     
    <div id="result"></div>

</body>
</html>

在写一个servlet类 AJAXServlet类
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2010-4-15
* Time: 14:16:11
* To change this template use File | Settings | File Templates.
*/
public class AJAXServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        try{
            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 username = httpServletRequest.getParameter("username");
             //2.检查参数是否有问题
            if(username == null || username.length() == 0){
                out.println("用户名不能为空");
            } else{
                 //3.校验操作
                if(username.equals("wangxingkui")){
                    //4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
                    //写法没有变化，本质发生了改变
                    out.println("用户名[" + username + "]已经存在，请使用其他用户名, " + temp);
                } else{

                    out.println("用户名[" + username + "]尚未存在，可以使用该用户名注册, " + temp);
                }
            }
        }catch(Exception e){
            e.printStackTrace();
        }
    }

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

后面有三个js其实都是一样的就是写法不一样
一：写一个js validate.js
function validate(){
    //1.获取文本框中的内容
    //jquery的查找节点的方式，参数中#加上id的属性值就可以找到一个节点
    //jquery的方法返回的都是jquery的对象，可以继续在面执行其他的jquery操作
    var jqueryObj = $("#userName");
    //获取节点的值
    var userName = jqueryObj.val();

    //2.将文本框中的数据发送给服务器端的servlet
    //使用jquery的XMLHTTPRequest对象get请求的封装
    $.get("AJAXServlet?username=" + userName,null,callback);

}
function callback(data){
      //3.接收服务器端返回的数据
      alert(data);
      //4.服务器端返回的数据动态的显示在页面上
      //找到保存结果信息的节点
      var resultObj = $("#result");
      //动态改变页面中div节点中的内容
      resultObj.html(data);
}

二：还可以用jquery中的一种简化写法
function validate(){
    $.get("AJAXServlet?username=" + $("#userName").val(),null,function(data){
         $("#result").html(data);
    })
}

三：为了骗过浏览器缓存用jquery的一种写法
function validate(){
    var url = "AJAXServlet?username=" + $("#userName").val();
    url = converURL(url);
    $.get(url,null,function(data){
        $("#result").html(data);
    })

}

//给url地址增加时间戳，骗过浏览器，不读取缓存
function converURL(url){
     //获取时间戳
    var timestamp = (new Date()).valueOf();
    //将时间戳信息拼接到url上
    if(url.indexOf("?") >= 0){
        url = url + "&t" + timestamp;
    }else{
        url = url + "?t" + timestamp;
    }
    return url;
}

不忘了配置web.xml

dabizime

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery处理一般数据（四）

首先写一个html user.html 都需要导入jquery.js 和自己手写的js validate.js "http://www.w3.org/TR/html4/loose.dtd"> 用户校验ajax实例用户名校验AJAX实例，请输入用户名： 456--> 123456
复制链接

扫一扫

专栏目录