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

最新推荐文章于 2022-08-31 12:29:18 发布

Oliver_W

最新推荐文章于 2022-08-31 12:29:18 发布

阅读量733

点赞数 1

本文链接：https://blog.csdn.net/oliver_w/article/details/75354786

版权

Java 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

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();
    }

只是将自己写的练习记下来，如果有错误或者可以改进的地方，还请各位大神指点。

Oliver_W

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录