ajax将监听器值赋值servlet,通过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);

}

测试例子

haha

测试后台

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,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

参考源码 仅供参考

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Eclipse中实现前后端数据交互可以通过以下步骤实现: 1. 首先,在Eclipse中创建一个动态Web项目,并配置好项目的基本结构和环境。 2. 在项目中创建JSP页面作为前端页面,用于向后台发送请求和接收响应。在JSP页面中可以使用HTML和JSTL标签库来构建页面。 3. 在后端使用Java编写Servlet,用于处理前端发送的请求和返回响应。在Servlet中可以使用Java代码连接数据库、执行查询等操作。 4. 使用JDBC来连接数据库。在Servlet中使用JDBC的API来连接数据库,并执行相应的数据库操作。 5. 处理前端请求和返回响应。在Servlet中根据前端发送的请求参数,执行相应的数据库操作,并将查询结果返回给前端。 下面是一个简单示例代码: 在JSP页面中,可以通过form表单或AJAX等方式向Servlet发送请求并接收响应: ```html <form action="MyServlet" method="GET"> <input type="text" name="param1" /> <input type="submit" value="Submit" /> </form> ``` 在Servlet中,可以通过HttpServletRequest对象获取前端发送的请求参数,并执行相应的数据库操作: ```java @WebServlet("/MyServlet") public class MyServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String param1 = request.getParameter("param1"); // 连接数据库,执行查询操作 Connection conn = DriverManager.getConnection(url, userName, passwd); // 执行数据库操作 // 将查询结果返回给前端 PrintWriter out = response.getWriter(); out.println("Query result: xxx"); out.close(); } } ``` 以上是一个简单的示例,实际应用中可能需要更多的代码和配置来完成前后端数据交互的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值