Ajax与jQuery-利用$.get()和$.post()方法传递html,xml,json数据

最新推荐文章于 2017-10-25 12:12:03 发布

Ned_mahone

最新推荐文章于 2017-10-25 12:12:03 发布

阅读量1.2k

点赞数

分类专栏： Web 文章标签： ajax jquery

Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这个转载一篇Ajax与jQuery的运用，通过 $.get()和$ .post()方法传递html,xml,json数据

【客户端写在.jsp中，服务端写在servlet中】

html格式数据

//客户端
<head>
<meta charset="UTF-8">
<title>GetPro</title>
<script type="text/javascript" src="script/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
    $("input:eq(2)").click(function(){
        $.get("LoginServlet",{        'username':encodeURI(encodeURI($("#username").val())),             'password':encodeURI(encodeURI($("#password").val()))},
                function(data,textStatus){
                    $("#content").html(data);
        },"html");
    });
    $("input:eq(3)").click(function(){
        $.post("LoginServlet",{'username':encodeURI(encodeURI($("#username").val())),'password':encodeURI(encodeURI($("#password").val()))},
        function(data,textStatus){
            $("#content").html(data);
        },"html");
    });
});
</script>
</head>
<body>
<input type="text" name="username" id="username"/>
<input type="password" name="password" id="password"/>
<input type="button" name="loginGet" value="loginGet"/>
<input type="button" name="loginPost" value="loginPost"/>
<div id="content"></div>
</body>

//服务端
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //服务端返回给客户端的类型以及编码方式
    response.setContentType("text/html;charset=utf-8");
    //告诉客户端以utf-8的编码方式解析发送过去的信息
    response.setCharacterEncoding("utf-8");
    //用utf-8编码方式翻译发送过来的数据
    request.setCharacterEncoding("utf-8");
    //获取客户端传入的数据
    //两次解码
    String username=URLDecoder.decode(URLDecoder.decode(
    request.getParameter("username"),"utf-8"),"utf-8");
    String password=URLDecoder.decode(URLDecoder.decode(
    request.getParameter("password"),"utf-8"),"utf-8");
    //获取输出流
    PrintWriter pw=response.getWriter();
    if(username.equals("张三")&&password.equals("1234")){
        pw.println("<p>欢迎 "+username+" 登陆</p>");
    }else{
        pw.println("<p>用户名或密码错误！</p>");
    }
    //关闭资源
    pw.close();
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //服务端返回给客户端的类型以及编码方式
    response.setContentType("text/html;charset=utf-8");
    //告诉客户端以utf-8的编码方式解析发送过去的信息
    response.setCharacterEncoding("utf-8");
    //用utf-8编码方式翻译发送过来的数据
    request.setCharacterEncoding("utf-8");
    //获取客户端传入的数据
    String username=URLDecoder.decode(URLDecoder.decode(request.getParameter("username"),"utf-8"),"utf-8");
    String password=URLDecoder.decode(URLDecoder.decode(request.getParameter("password"),"utf-8"),"utf-8");
    //获取输出流
    PrintWriter pw=response.getWriter();
    //数据验证
    if(username.equals("李四")&&password.equals("1234")){
        pw.println("<p>欢迎 "+username+" 登陆</p>");
    }else{
        pw.println("<p>用户名或密码错误！</p>");
    }
    //关闭资源
    pw.close();
}

xml格式数据

//客户端
<head>
<meta charset="UTF-8">
<title>GetPro</title>
<script type="text/javascript" src="script/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
    $("input:eq(2)").click(function(){
       $.get("LoginXMLServlet",{
       'username':encodeURI(encodeURI($("#username").val())),
       'password':encodeURI(encodeURI($("#password").val()))},
       function(data,textStatus){
            var username=$(data).find("username").text();
            var password=$(data).find("password").text();
            $("#content").html("<p>用户名："+username+" 密码："+password+"</p>");
        },"xml");
    });

    $("input:eq(3)").click(function(){
       $.post("LoginXMLServlet",{
       'username':encodeURI(encodeURI($("#username").val())),
       'password':encodeURI(encodeURI($("#password").val()))},
       function(data,textStatus){
             var username=$(data).find("username").text();
             var password=$(data).find("password").text();
             $("#content").html("<p>用户名："+username+" 密码："+password+"</p>");
        },"xml");
    });
});
</script>
</head>
<body>
<input type="text" name="username" id="username"/>
<input type="password" name="password" id="password"/>
<input type="button" name="loginGet" value="loginGet"/>
<input type="button" name="loginPost" value="loginPost"/>
<div id="content"></div>
</body>

//服务端
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //服务端返回给客户端的类型以及编码方式
    response.setContentType("text/xml;charset=utf-8");
    //告诉客户端以utf-8的编码方式解析发送过去的信息
    response.setCharacterEncoding("utf-8");
    //用utf-8编码方式翻译发送过来的数据
    request.setCharacterEncoding("utf-8");
    //获取客户端传入的数据
    String username=URLDecoder.decode(URLDecoder.decode(
    request.getParameter("username"),"utf-8"),"utf-8");
    String password=URLDecoder.decode(URLDecoder.decode(
    request.getParameter("password"),"utf-8"),"utf-8");
    //获取输出流
    PrintWriter pw=response.getWriter();
    //用StringBuilder存储数据
    StringBuilder xml=new StringBuilder("<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n");
    xml.append("<student>");
    xml.append("<username>"+username+"</username>");
    xml.append("<password>"+password+"</password>");
    xml.append("</student>");
    pw.println(xml.toString());
    pw.close();
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request,     HttpServletResponse response) throws ServletException, IOException {
    //服务端返回给客户端的类型以及编码方式
    response.setContentType("text/xml;charset=utf-8");
    //告诉客户端以utf-8的编码方式解析发送过去的信息
    response.setCharacterEncoding("utf-8");
    //用utf-8编码方式翻译发送过来的数据
    request.setCharacterEncoding("utf-8");
    //获取客户端传入的数据
    String username=URLDecoder.decode(URLDecoder.decode(
    request.getParameter("username"),"utf-8"),"utf-8");
    String password=URLDecoder.decode(URLDecoder.decode(
    request.getParameter("password"),"utf-8"),"utf-8");
    //获取输出流
    PrintWriter pw=response.getWriter();
    StringBuilder xml=new StringBuilder("<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n");
    xml.append("<student>");
    xml.append("<username>"+username+"</username>");
    xml.append("<password>"+password+"</password>");
    xml.append("</student>");
    pw.println(xml.toString());
    pw.close();
}

json格式数据

//客户端
<head>
<meta charset="UTF-8">
<title>GetPro</title>
<script type="text/javascript" src="script/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
    $("input:eq(0)").click(function(){
        $.get("LoginJSonServlet",
            function(data,textStatus){
            //对象名.键
            var students=data.student;
            var res="<ul>\n";
            for(var i=0;i<students.length;i++){
                var student=students[i];
                res+="<li>"+student.username+"--"+student.password+"</li>";
             }
             res+="</ul>";
             //转换成元素，添加进content中
             $("#content").append($(res));
        },"json");
    });

    $("input:eq(1)").click(function(){
        $.post("LoginJSonServlet",
             function(data,textStatus){
             //对象名.键
             var students=data.student;
             var res="<ul>\n";
             for(var i=0;i<students.length;i++){
                 var student=students[i];
                 res+="<li>"+student.username+"--"+student.password+"</li>";
             }
             res+="</ul>";
             //转换成元素，添加进content中
             $("#content").append($(res));
        },"json");
    });
});
</script>
</head>
<body>
<input type="button"  value="GetJSon"/>
<input type="button"  value="PostJSon"/>
<div id="content"></div>
</body>

//服务端
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    ///服务端返回给客户端的类型以及编码方式
    response.setContentType("application/json;charset=utf-8");
    //告诉客户端以utf-8的编码方式解析发送过去的信息
    response.setCharacterEncoding("utf-8");
    //用utf-8编码方式翻译发送过来的数据
    request.setCharacterEncoding("utf-8");

    //获取输出流，\为"转义
    PrintWriter pw=response.getWriter();
    pw.println("{\"student\":[{\"username\":\"张三\",\"password\":\"1234\"},{\"username\":\"李四\",\"password\":\"4321\"}]}");
    pw.close();
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //服务端返回给客户端的类型以及编码方式     response.setContentType("application/json;charset=utf-8");
    //告诉客户端以utf-8的编码方式解析发送过去的信息
    response.setCharacterEncoding("utf-8");
    //用utf-8编码方式翻译发送过来的数据
    request.setCharacterEncoding("utf-8");
    //获取输出流
    PrintWriter pw=response.getWriter();
    pw.println("{\"student\":[{\"username\":\"李四\",\"password\":\"1234\"},{\"username\":\"张三\",\"password\":\"4321\"}]}");
    pw.close();
}