使用jquery的ajax进行异步交互(json格式)

jsp代码:即form表单

<form action="">
                <table align="center">
                    <tr><td>用户名:</td><td><input type="text" name="username" id="id1"><span id="msg1"></td></tr>
                    <tr><td>密码:</td><td><input type="password" name="password" id="id2"><span id="msg2"></td></tr>
                    <tr><td><a href="GoodsServlet?method=list"><input id="sub" type="button" value="登录"></a></td><td><input type="reset" value="重置"></td></tr>
                    <tr><td><a href="page/zhuce.jsp"><p>点击注册</p></a></td></tr>
                </table>
            </form>

js代码:
注意:需要引入jquery文件:

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
        $(function(){
            $("#id1").blur(function(){
                if($('#id1').val()==""){
                    alert("请输入用户名");
                }else{
                //使用ajax方法
                    $.ajax({
                    //具体的java代码所在的servlet   
                        url:"UserAjaxServlet",
                        //传输方式
                        type:"post",
                        //从jsp页面上,传到servlet的数据,可以多个,用逗号隔开.
                        data:{username:$("#id1").val()
                        },
                        //传输数据的格式,此处用到的是json格式,当然接收到的来自servlet的数据也需要是json格式的
                        dataType:"json",
                        //传输成功返回的方法,参数为ajax内部的msg
                        success:function(msg){

//具体的从servlet传来的数据,第一个msg是ajax的,第二个是自己定义的
                            $("#msg1").text(msg.msg);
                        }, 

                    });
                }
            });
    });

servlet,后台代码:

protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        JSONObject j = new JSONObject();
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        //拿到从前台通过ajax传过来的数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //sql语句
        String sql = "select username from t_user";
        if (username != null && password == null) {
            try {
                Connection conn = CreateConnection.getConnection();     
                Statement sta = conn.createStatement();
                ResultSet set = sta.executeQuery(sql);
                boolean flag = true;
                while (set.next()) {
                    System.out.println(set.getString("username"));
                    //判断从前台来的username是否和从数据库中查到的数据匹配?
                    if (username.equals(set.getString("username"))) {
                        //匹配到,flag为true,并且跳出循环
                        flag = true;
                        break;

                    } else {
                        flag = false;
                    }
                }
                //通过flag的值对前台发送信息
                if (flag) {
                    //匹配成功,调用JSONObject的对象,设置要传到前台的值
                    j.put("msg", "合法");
                    //写出
                    out.write(j.toString());
                } else {
                    j.put("msg", "该用户不存在");
                    out.write(j.toString());
                }
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

在servlet中,因为要到了json数据,所以引入了一个jar包,

import net.sf.json.JSONObject;

其他的都还好.没什么难点,主要掌握ajax中的传向servlet数据的方法,以及servlet传回ajax的数据,也就是前台的数据.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值