Ajax前后台传值小demo
发布时间：2020-12-16 00:43:06 所属栏目：百科 来源：网络整理
导读：本篇的demo总体实现了一个Ajax从前台到后台的交互的模拟功能，具体的情况是利用在前台动态以表格显示数据，每一行有一个复选框，然后利用servlet模拟在后台取出从前台传过来的主键值，其中在servlet中可以对数据进行增删改的功能，此处为模拟，并未对数据修
|
本篇的demo总体实现了一个Ajax从前台到后台的交互的模拟功能，具体的情况是利用在前台动态以表格显示数据，每一行有一个复选框，然后利用servlet模拟在后台取出从前台传过来的主键值，其中在servlet中可以对数据进行增删改的功能，此处为模拟，并未对数据修改，然后返回一个json数组，ajax成功执行时时跳转到另外一个页面并获得所传的值。 首先看程序运行的结果，url如下:http://localhost:8080/effective/taskExp.jsp
点击cancel按钮，跳转的url为 http://localhost:8080/effective/index.jsp?result=[9,44]
首先看web项目的目录结构
前台的taskExp.jsp的核心代码如下，利用JDBC从数据库中读取数据，然后在前台以table的方式显示数据，
<%
Connection ct = null;
PreparedStatement ps = null;
ResultSet rs = null;
String DRIVER = "com.mysql.jdbc.Driver";
String URL = "jdbc:mysql://localhost:3306/test";
String USERNAME = "root";
String PASSWD = "";
List<OrderDetail> orderDetailList = new ArrayList<OrderDetail>();
String doflag = request.getParameter("doflag");
if(doflag==null||doflag.length()==0) {
try {
Class.forName(DRIVER);
ct = DriverManager.getConnection(URL,USERNAME,PASSWD);
String sql = "select * from orddetail";
ps = ct.prepareStatement(sql);
rs = ps.executeQuery();
while(rs.next()) {
OrderDetail orderDetail = new OrderDetail();
orderDetail.setId(rs.getInt("id"));
orderDetail.setOrderId(rs.getString("orderId"));
orderDetail.setName(rs.getString("name"));
orderDetail.setAddress(rs.getString("address"));
orderDetail.setFlag(rs.getInt("flag"));
orderDetailList.add(orderDetail);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
}
}
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<base target="_self">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="test.js"></script></head>
<body onload="onload()">
<center>
<h2>我的订单</h2>
<form action="ordervideo.jsp" method="post" name="save">
<table width="90%" border="1" cellspacing="0" cellpadding="1">
<tr>
<th><input type="checkbox" id="allid" onclick="doallcheck()"></th>
<th>orderId</th>
<th>name</th>
<th>address</th>
</tr>
<%
if(null != orderDetailList && orderDetailList.size() != 0) {
for(OrderDetail orderDetail : orderDetailList) {
%>
<tr align="center">
<%
if(orderDetail.getFlag() == 1) {
%>
<td><input type="checkbox" name="mycheckbox" onclick="doclickcheck(this)" checked="checked" value="<%=orderDetail.getId() %>"></td>
<%
} else if(orderDetail.getFlag() == 0) {
%>
<td><input type="checkbox" name="mycheckbox" onclick="doclickcheck(this)" value="<%=orderDetail.getId() %>"></td>
<%
}
%>
<td><%=orderDetail.getOrderId() %></td>
<td><%=orderDetail.getName() %></td>
<td><%=orderDetail.getAddress() %></td>
</tr>
<%
}
}
%>
<tr>
<td colspan="5" align="right"><input type="submit" value="ok"/>
<input type="button" id="save1" value="cancel" />
<input type="hidden" name="doflag" value="update"/>
</tr>
</table>
</form>
</center>
</body>
</html>
test.js文件的核心代码如下，处理的逻辑是查看所有选中行的复选框，并且把每行选中的数据中的主键传给url为task的servlet处理，如果成功执行就跳转到index.jsp，并将后台传给前台的数据也传给index.jsp：
$(document).ready(function(){
_postData();
});
function _postData(){
$("#save1").click(function(){
var str = "";
var ck = $("input[name='mycheckbox']:checked");
for(var i=0;i<ck.length;i++){
if(ck[i].checked)
{
str+=ck[i].value+",";
}
}
str = str.substring(0,str.length-1);
$.ajax({
url: 'task',type: 'post',//dataType: 'json',data: {name:'['+str+']'},success: function(data){
window.location.href="index.jsp?result="+data;
},error: function(){
alert("error");
}
});
});
}
servlet的代码如下，接受从前台传过来的参数值，当然这当中可以解析json数组，对数据操作，然后模拟并添加了一个数据，然后又返回一个json数组
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TaskServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
String name = request.getParameter("name");
String result = name.substring(0,name.length()-1)+",44]";
request.setAttribute("result",result);
System.out.println("before execute");
//response.sendRedirect("index.jsp");
//request.getRequestDispatcher("/index.jsp").forward(request,response);
System.out.println("after execute");
response.setContentType("text/plain");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(result);
out.flush();
out.close();
}
}
index.jsp就非常简单了，代码如下
<%=request.getParameter("result") %>
文档所需jar包为连接mysql的驱动jar包
本次小demo遇到的一些问题 1.一开始的时候，我打算直接在servlet中跳转，无论怎样都无法跳转，不管是重定向还是转发，对应servlet中注释的代码，最后在技术群问才发现这是根本不可能的，不管你在servlet中如何跳转，相当于把返回值传$.ajax函数中的function的回调函数，不信可以尝试alert(data)你就会知道了，所以说思路就是，利用ajax传值给servlet，如果需要跳转的话，在回调函数中跳转。 2.ajax方法中的dataType的含义是返回值的类型，如果此处设置为json串，而返回的不是json串，那么会跳转到error中 3.一开始的时候其实用的并不是ajax函数，而是post函数，但是发现在post并不能对返回的success和error进行判断，从而采用的ajax这个父类的函数
ajax中的dataType属性的说明
不知道我的解释是否正确，如果有大牛能够跟小弟指正，望不吝赐教。当然更深入的学习还是看jquery官网文档更好 如果文章有什么错误或者有什么建议，欢迎提出，大家共同交流，一起进步 文章转载请注明出处，请尊重知识产权 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |