网上有比较多的教程来将如何实现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省事很多。

ajax和servlet交互的更多相关文章

  1. ajax和servlet交互,表单日历插件,表单验证,form.js

    我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...

  2. ajax与servlet交互(通过JSON),JAVA的arraylist传到前端的方法

    所实现的效果:首先从前端(ajax)传参数给servlet,然后servlet经过处理,把arraylist类型的参数以JSON字符串的形式返回给前端(ajax),然后前端经过解析,把JSON字符串解 ...

  3. 实现AJAX的异步交互的步骤

    <input type="button" value="异步请求"id="btn"> <script> 实现ajax ...

  4. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  5. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  6. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  7. Servlet交互【重定向 与 请求分派】详解

    Servlet交互 在serlvet中,需要调用另外一个资源来对浏览器的请求进行响应,两种方式实现: 调用HttpServletResponse.sendRedirect 方法实现 重定向 调用Req ...

  8. SpringMVC之Ajax与Controller交互

    前面学习了拦截器,通过拦截器我们可以拦截请求,做进一步处理之后再往下进行,这里我们使用Ajax的时候会有一个问题就是会把js.css这些静态资源文件也进行了拦截,这样在jsp中就无法引入的静态资源文件 ...

  9. Ajax+Jsp+servlet+json技术的使用

    Ajax+Jsp+servlet+json技术的使用 在使用json的时候,记得必须导入如下几个.jar包,最好是手动复制.jar包只lib路径下,否则可能出现异常. commons-beanutil ...

随机推荐

  1. Redis内存使用优化与存储(转)

    Redis常用数据类型 Redis最为常用的数据类型主要有以下五种: String Hash List Set Sorted set 在具体描述这几种数据类型之前,我们先通过一张图了解下Redis内部 ...

  2. sublime代码片段功能

    tools - > developer - > new snippet有了这个,你就可以通过iu这两个键,直接弄出自己的模板了,这就很方便了,不用在复制粘贴了.上是代码模板,下面是快捷键, ...

  3. Web Penetration Testing 渗透 通信信息安全

    参考 http://download.csdn.net/detail/jason571/8146587 一.操作系统原理,JavaScript,http/https的运行原理,Ajax,SQL等技术基 ...

  4. [Linux] Netstat 执行过慢,占CPU100%,原因查找

    一.缘由: 待续 二.解决办法: netstat -tlnp netstat -nap|grep pid ss |grep pid ss -s sar -u 1 10 strace -FfT -o n ...

  5. php pcntl 多进程学习

    1.捕获子进程退出(监听SIGCHLD信号,然后调用 pcntl_wait 函数) declare(ticks=1); pcntl_signal(SIGCHLD, "sig_handler& ...

  6. [实变函数]5.6 Lebesgue 积分的几何意义 $\bullet$ Fubini 定理

    1 本节推广数学分析中的 Fubini 定理. 为此, 先引入 (1)(从低到高) 对 $A\subset \bbR^p, B\subset\bbR^q$, $$\bex A\times B=\sed ...

  7. 通过Application传递数据代码

    使用Application传递数据步骤如下:创建新class,取名MyApp,继承android.app.Application父类,并在MyApp中定义需要保存的属性     在整个Android程 ...

  8. 一款监控网络状态的好工具- Smokeping

    最近工作中需要监测某个分公司到IDC机房的网络情况,到网络上找了不少软件,发现一款叫smokeping的开源软件还不错,它是rrdtool的作者制作的,在图形显示方面很漂亮,可以用来很好的检测网络状态 ...

  9. label 行距

    NSMutableAttributedString * attributedString1 = [[NSMutableAttributedString alloc] initWithString:te ...

  10. jquery ajax事件

    $.ajax({ type : 'POST', url : 'user.php', data : $('form').serialize(), success : function (response ...