zoukankan      html  css  js  c++  java
  • ajax和servlet交互

    网上有比较多的教程来将如何实现ajax与servlet的交互了,这里这里的教程可以参考参考,在此处我只简单说明一下,并记录一下我这次遇到的问题。

    整个思路是:写个js函数,在里面使用XHR(ajax的教程)的open和send方法与服务器进行交互

    我遇到的问题是将setRequestHeader的第二个参数设置错了,导致send发送的数据服务器没有接收到。正确的形式如下:

    xmlHttp.open("POST","newProject",true);
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
            xmlHttp.send("newProjectName=" + project_name);

    在服务器端使用servlet处理接收到的数据:

    @WebServlet("/newProject")
    public class ProjectNewServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
           
        ……
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            request.setCharacterEncoding("UTF-8");
            
            String projectName = request.getParameter("newProjectName");
            
            String fileContent = "";
    ……
    }
    }

    然后就可以对接收到的数据进行处理了,处理完后还可以使用response发送数据给客户端,客户端在onreadystatechange绑定的函数里对数据进行处理,这些东西上面的教程有详解。servlet返回数据的部分代码如下:

    response.setContentType("text/xml;charset=UTF-8");
            PrintWriter out = response.getWriter();
            out.write(fileContent);
            out.close();

    fileContent为xml数据

    事实上,这种使用原始的javascript和ajax有点麻烦,如果直接用jquery的.post或者.get或者.ajax方法,更方便更简单,js代码如下:

    $.post("./newProject",{newProjectName:project_name},
                function(data,status){
            //alert("data:" + data + "status:" + status);
            if(status == "success"){
                var nodes = data.getElementsByTagName("project");
                //alert(nodes[0].getAttribute("name"));
                for(var i = 0;i < nodes.length;i ++){
                    $("#project_items").append("<option value="" + (i+1) + "">" + nodes[i].getAttribute("name") + "</option>");    
                }
            }
                    
        });

    "newProject"为上面的servlet的注解路径,data为servlet返回的xml数据。使用jquery省事很多。

  • 相关阅读:
    YUI的treeview组件——带checkbox类型的treeview如何实现disabled功能
    [转载 js] 15个基于Web的HTML编辑器
    YUI3学习笔记 ( 8 )
    js中用于继承的函数extend——摘自《javascript设计模式》
    YUI的treeview组件——带checkbox类型的treeview如何实现disabled功能
    YUI3学习笔记 ( 8 )
    Delphi 2007 代码补全、语句提示的快捷键是什么?
    Fastreport使用经验(转)在Delphi程序中访问报表对象
    cxGrid使用记录
    Delphi编程地一些小程序
  • 原文地址:https://www.cnblogs.com/Shirlies/p/4251116.html
Copyright © 2011-2022 走看看