首先前端页面的触发事件引发ajax事件：
起那段页面如下：
<%@page language="java" import="java.util.*" pageEncoding="gb2312"%>
<META http-equiv=Content-Type content="text/xml;charset = gbk" pageEncoding = "gbk">
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/sm/";
%>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>商品类别管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link href="../resources/css/hottest.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.STYLE1 {font-size: 12px}
.STYLE4 {
font-size: 12px;
color: #1F4A65;
font-weight: bold;
font-family:"宋体";
}
a:link {
font-size: 12px;
color: #06482a;
text-decoration: none;
}
a:visited {
font-size: 12px;
color: #06482a;
text-decoration: none;
}
a:hover {
font-size: 12px;
color: #FF0000;
text-decoration: underline;
}
a:active {
font-size: 12px;
color: #FF0000;
text-decoration: none;
}
.bt_01{
width:71px;
height:25px;
border:0px;
background: url(../resources/images/htdl.gif) no-repeat;
color:#fff;
font-size:12px;
}
-->
</style>
<script type="text/javascript">
function checkName(){
var x=document.getElementById("categoryName");
if(x.value==""){
document.getElementById("nameErr").innerHTML="<img src='../resources/images/no.gif' width='16' height='16' />商品名不能为空！";
return false;
}
else{
document.getElementById("nameErr").innerHTML="<img src='../resources/images/yes.gif' width='16' height='16' />";
return true;
}
}
function checkT(stateVal){
var url = "${pageContext.request.contextPath}/CategoryajaxServlet.do?tlevel="+document.getElementById("tlevel").value;
if(document.getElementById("tlevel").value.toString()=="3"){
var a=document.getElementById("parentCategory");
document.getElementById("parentCategory").removeChild(a.options[0]);
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req)
{
//true:异步模式
req.open("GET",url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.onreadystatechange = complete;
req.send(null);
// document.getElementById("tlevelErr").innerText="请稍后，正在!";
}
}
else{
document.getElementById("parentCategory").innerHTML="<option value=所有商品>所有商品</option>";
}
}
function complete()
{
var parentCategory=document.getElementById("parentCategory");
if (req.readyState == 4)
{
if (req.status == 200)
{
document.getElementById("parentCategory").innerHTML= req.responseText;
}
}
}
</script>
</head>
<body>
<form action="<%=path%>/AddCategoryServlet.do" method="post">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" height="30"><img src="../resources/images/tab_03.gif" width="15" height="30" /></td>
<td background="../resources/images/tab_05.gif" align="left"><img src="../resources/images/311.gif" width="16" height="16" /> <span class="STYLE4">商品类别添加</span></td>
<td width="14"><img src="../resources/images/tab_07.gif" width="14" height="30" /></td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" style="background:url(../resources/images/tab_12.gif) repeat-y left #d3e7fc; "></td>
<td width="97%" bgcolor="#FFFFFF" height="500" valign="top" align="center" style="padding-top:20px;">
<table width="505px" border="0" cellspacing="0" cellpadding="0">
<tr style="width:100%;height:20px;background:url(../resources/images/htbg1.gif);">
<td></td>
</tr>
<tr style="width:100%; height:250px; background: url(../resources/images/htbg3.gif) repeat-y; text-align:center;">
<td>
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" height="40" align="right" class="STYLE4">类别名称：</td>
<td align="left"><input type="text" name="categoryName" id="categoryName" onblur="checkName()"/><span id="nameErr"></span></td>
</tr>
<tr>
<td height="40" align="right" class="STYLE4">类别层次：</td>
<td height="30" align="left">
<select name="tlevel" id="tlevel" onblur="checkT()">
<option value="2">2</option>
<option value="3">3</option>
</select>
<span id="tlevelErr"></span>
</td>
</tr>
<tr>
<td height="40" align="right" class="STYLE4">父 类：</td>
<td height="30" align="left">
<select name="parentCategory" id="parentCategory" >
<option value="所有商品">所有商品</option>
</select>
</td>
</tr>
<tr>
<td height="40" align="right" class="STYLE4">状 态：</td>
<td height="30" align="left">
<select name="status"> <option value="激活">激活</option><option value="冻结">冻结</option></select></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">
<input type="submit" value="确定" class="bt_01"/>
<input type="reset" value="取消" class="bt_01"/></td>
</tr>
<tr><td height="40" colspan="2" align="center" class="STYLE4"><span id="prompt">${result}</spen></td>
</tr>
</table>
</td>
</tr>
<tr style="width:100%; height:17px; background: url(../resources/images/htbg2.gif) no-repeat;">
<td> </td>
</tr>
</table>
</td>
<td width="14" style="background:url(../resources/images/tab_16.gif) repeat-y right #d3e7fc; "> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="29"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" height="29"><img src="../resources/images/tab_20.gif" width="15" height="29" /></td>
<td background="../resources/images/tab_21.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="21%" height="14"> </td>
<td width="79%" class="STYLE1" align="right"> </td>
</tr>
</table></td>
<td width="14"><img src="../resources/images/tab_22.gif" width="14" height="29" /></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
根据select的变化局部更新<option>的内容
后台ajax的读取数据的代码如下：
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.fyz.servlet.ajax;
import com.fyz.factory.DAOFactory;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author RDGFT
*/
@WebServlet(name = "CategoryajaxServlet", urlPatterns = {"/CategoryajaxServlet"})
public class CategoryajaxServlet extends HttpServlet {
/**
* Processes requests for both HTTP
* <code>GET</code> and
* <code>POST</code> methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=gb2312");
PrintWriter out = response.getWriter();
StringBuffer string = new StringBuffer();
String s=null;
try {
/* TODO output your page here. You may use following sample code. */
List list = DAOFactory.getCategoryDAOIMP().queryCategory_name(2);
Iterator it = list.iterator();
while (it.hasNext()) {
s=(String) it.next();
string.append("<option value="+s+">"+s+"</option>");
}
out.write(string.toString());
} finally {
out.close();
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
public String getServletInfo() {
return "Short description";
}
}
提交表单的数据代码如下;
package com.fyz.servlet_sm;
import com.fyz.vo.CategoryVO;
import com.fyz.factory.DAOFactory;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.Random;
import java.util.logging.Level;
import java.util.logging.Logger;
public class AddCategoryServlet extends HttpServlet {
//doGet
Random random;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
CategoryVO cvo = new CategoryVO();
//从前台表单获得数据并存入VO类中
cvo.setCate_name(request.getParameter("categoryName"));
cvo.setCate_layer(request.getParameter("tlevel"));
cvo.setCate_father(request.getParameter("parentCategory"));
cvo.setStatus(request.getParameter("status"));
//添加相应数据到数据库
if (DAOFactory.getCategoryDAOIMP().addCategory(cvo)) {
request.setAttribute("result", "添加商品分类成功!");
} else {
request.setAttribute("result", "添加商品分类失败！");
}
//页面跳转
RequestDispatcher rd = request.getRequestDispatcher("sm/addCategory.jsp");
rd.forward(request, response);
}
//doPost()
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
doGet(request, response);
}
}
调用数据库部分代码如下：
public boolean addCategory(CategoryVO cvo) {
boolean result = false;
Connection conn = null;
PreparedStatement ps = null;
CallableStatement csmt = null;
ResultSet rs = null;
try {
conn = DBUtil.getInstance().getConn();
csmt = conn.prepareCall("{call add_category(?,?,?,?)}");
System.out.println(cvo.getCate_name());
System.out.println(cvo.getCate_layer());
System.out.println(cvo.getCate_father());
System.out.println(cvo.getStatus());
csmt.setString(1, cvo.getCate_name());
csmt.setInt(2, Integer.parseInt(cvo.getCate_layer()));
csmt.setString(3, cvo.getCate_father());
csmt.setString(4, cvo.getStatus());
int i=csmt.executeUpdate();
if (i>=0) {
result = true;
}
} catch (Exception ex) {
Logger.getLogger(CategoryDAOIMP.class.getName()).log(Level.SEVERE, null, ex);
} finally {
DBUtil.dbClose(ps, conn);
}
return result;
}
希望能给你带来收获
分享到：
相关推荐
7. **示例中的`ajax.html`和`demo.php`**：`ajax.html`很可能是包含JavaScript代码的HTML文件，用于创建Ajax请求并处理返回的数据，更新页面内容。`demo.php`是PHP脚本，它接收Ajax请求，处理数据，然后返回JSON格式...
该页面处理请求并将数据插入数据库，然后返回响应给Ajax调用者。调用者根据响应进行后续操作。 #### 三、示例代码分析 1. **Default.aspx**：主页面，包含用户输入表单及Ajax调用逻辑。 ```html 无标题页 ...
#### 步骤五：更新页面内容 `show()`函数将解析服务器返回的XML文档，提取所需数据，并将其格式化为HTML，然后插入到页面的特定元素中。这一步实现了页面局部内容的更新。 #### 步骤六：自动刷新机制 通过设置...
**Ajax技术详解与实际应用** ...批量处理数据，避免频繁的Ajax调用。 综上，Ajax是现代Web开发中不可或缺的一部分，它极大地提升了用户体验。通过掌握Ajax的基本原理和实践，开发者可以构建更高效、更互动的Web应用。
在SSH（Spring、Struts和Hibernate）框架下，利用AJAX动态从数据库查询并加载菜单是一种常见的需求，尤其是在开发Web应用程序时，为了提供用户友好的交互体验。下面将详细讲解如何实现这一功能。 首先，我们需要...
标题中的“基于iBatis，ajax从数据库取数的无刷新级联”指的是在Web开发中，使用iBatis作为持久层框架，结合Ajax技术，实现动态从数据库获取数据并更新视图，而无需页面整体刷新，从而提高用户体验。这里涉及的主要...
在页面表格的添删改查场景中，当用户执行这些操作时，AJAX会向后台发送相应的HTTP请求，处理完成后，服务器返回更新的数据，然后JavaScript更新表格局部，实现页面的动态刷新。 在添操作中，用户可能输入新数据后...
Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，...前端则通过Ajax调用这个处理程序，动态更新检查结果或其他相关信息。
例如，我们可能有一个评论区，每当有新评论提交时，通过Ajax调用后台服务，获取新评论，然后将其插入到评论列表中。 ```html function refreshComments() { var xhr = new XMLHttpRequest(); xhr....
5. **更新DOM**：在客户端，接收到服务器响应后，JavaScript会根据返回的数据更新DOM（文档对象模型），从而实现页面的无刷新更新。可以使用DOM操作方法，如innerHTML、appendChild等，或者使用jQuery等库简化操作。...
它允许在不重新加载整个网页的情况下，与服务器交换数据并局部更新页面。这里，我们利用Ajax调用WebService，获取照片数据，然后在客户端进行处理，达到无刷新的效果，提升用户体验。Jquery库简化了Ajax操作，提供了...
Ajax局部刷新技术是一种在网页不进行整个页面刷新的情况下，通过后台与服务器异步交换数据并局部更新页面的技术。这种技术极大地提升了用户体验，因为它允许用户在交互时无需等待整个页面加载，仅更新必要的部分。C#...
它允许网页在不重新加载整个页面的情况下，通过JavaScript异步地从服务器获取并更新数据。这样，用户可以在页面上进行操作时，感受到更加流畅和即时的响应，增强了用户体验。 ### 实现局部刷新的步骤 接下来，我们...
它的核心在于利用JavaScript异步地与服务器交换数据并更新页面的局部内容，从而提升了用户体验，使得网页更具交互性。 首先，我们需要理解Ajax的工作原理。Ajax通过创建XMLHttpRequest对象（在现代浏览器中，这个...
在.NET开发环境中，实现网页实时数据更新有两种常见技术：AJAX（Asynchronous JavaScript and XML）和定时刷新。本文将深入探讨这两种技术，并结合.NET框架，分析它们如何与数据库交互，实现实时页面刷新。 首先，...
AJAX（Asynchronous JavaScript and XML）是一种在无需刷新...总之，AJAX技术在网页应用中扮演着关键角色，它能够实现页面的局部刷新，提高用户体验，并允许在用户界面无明显中断的情况下与后端数据库进行高效互动。
由于我们在UpdatePanel中，这些操作不会导致整个页面刷新，而是通过Ajax调用完成局部更新。 同时，我们可能还需要在客户端进行一些JavaScript处理，例如验证用户输入或提供反馈。可以通过在GridView控件上添加...
在“Ajax异步刷新的实现 带数据库”的主题中，我们将探讨如何利用Ajax技术配合SSH（Spring、Struts2、Hibernate）框架来实现在不刷新整个页面的情况下与数据库进行交互，更新页面内容。SSH框架是Java Web开发中常用...