java前后端ajax交互_通过ajax调用HttpServlet来实现前后端数据交互

1 前端：ajax实现调用，记得要引用jquery

function ajaxtest(index) {

var datapar = {

"text" : $("#input" + index).val(),

"index" : index

};

var options = {

url : "ajaxtest",

type : "post",

data : datapar,

success : function(data) {

//alert(data);

var mytext = $("textarea[id*='output" + index + "']");

mytext.val(data);

}

};

$.ajax(options);

}

测试例子

2 后台：继承HttpServlet实现后台调用

package com.niu;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

* Servlet implementation class ServletTest

*/

@WebServlet("/ServletTest")

public class ServletTest extends HttpServlet {

private static final long serialVersionUID = 1L;

/**

* @see HttpServlet#HttpServlet()

*/

public ServletTest() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

* response)

*/

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

response.setHeader("Content-type", "text/html;charset=UTF-8");

response.setCharacterEncoding("UTF-8");

/**

* 当多线程并发访问这个方法里面的代码时，会存在线程安全问题吗

* i变量被多个线程并发访问，但是没有线程安全问题，因为i是doGet方法里面的局部变量，

* 当有多个线程并发访问doGet方法时，每一个线程里面都有自己的i变量， 各个线程操作的都是自己的i变量，所以不存在线程安全问题

* 多线程并发访问某一个方法的时候，如果在方法内部定义了一些资源(变量，集合等) 那么每一个线程都有这些东西，所以就不存在线程安全问题了

*/

String text = (String) request.getParameter("text");

System.out.println("结果已经传入后台：" + text);

String output = "后台返回的结果加上前台的结果" + text;

response.getWriter().write(output);

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

* response)

*/

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

doGet(request, response);

}

}

3 前后端连接：在web-inf下面新建web.xml

xmlns="http://java.sun.com/xml/ns/javaee"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"

id="WebApp_ID" version="3.0">

WebTest

index.html

default

org.apache.catalina.servlets.DefaultServlet

debug

0

listings

false

1

ServletDemo1

com.niu.ServletTest

ServletDemo1

/ajaxtest

参考源码 仅供参考