Ajax实现用户图片随用户名改变

<javascript>中代码如下:

<script type="text/javascript">
function mycheck() {
　　　　　//获取用户名文本框里的值
        var uname = document.getElementById("uname").value;
        try {
            xmlhttp = new ActiveObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlhttp = new XMLHttpRequest();
        }

        //设置连接，把用户文本框里的值传到servlet中去
        xmlhttp.open("post", "../LoginPathServlet?uname=" + uname);

        //设置请求头信息
        xmlhttp.setRequestHeader("Content-type",
                "application/x-www-form-urlencoded");

        //设置回调函数
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
　　　　　　　　　　　　//获取传回来的值
                    var s = xmlhttp.responseText;
　　　　　　　　　　　　//把图片设置图片路径为用户的图片路径
                    document.getElementById("tx").src = s;
                }
            }
        }
        xmlhttp.send(null);

    }
</script>

<body>中代码如下:

<div class="login_title">
          <img id="tx" src="默认图片路径 width="50px" height="50px">
 </div>
<div class="item item-fore1">
   <input name="uname" onkeyup="mycheck();" type="text" class="text"
    id="uname" placeholder="请输入用户">
 </div>

Servlet中代码如下:

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;
import javax.servlet.http.HttpSession;

import entity.Uuser1;
import biz.imp_biz.Imp_Uuserbiz;

public class LoginPathServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        // 设置编码
        response.setCharacterEncoding("utf-8");
        request.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        HttpSession session = request.getSession();
        //接收数据
        String uname = request.getParameter("uname");
        
                //连接数据库判断用户名是否存在
        Imp_Uuserbiz iu = new Imp_Uuserbiz();
        Uuser1 u =    iu.selectbyname(uname);
                 //设置一个默认图片路径
        String str="../upload/hehe.jpg";
               //如果用户存在，把用户图片路径传回去
        if(u!=null){
            if(u.getPhoto()!=null){
                str="../"+u.getPhoto();
            }
        }
        out.print(str);
        
    }

}

Ajax实现用户图片随用户名改变

<javascript>中代码如下:

<body>中代码如下:

Servlet中代码如下:

实现后功能:

猜你喜欢