AJAX学习笔记---应用AJAX模仿"联系站长"（JSP版）

最新推荐文章于 2017-10-24 22:17:03 发布

最新推荐文章于 2017-10-24 22:17:03 发布 · 135 阅读

·

0

·

文章标签：

#Ajax #JSP #Struts #Apache #Servlet

本文介绍了一个简单的AJAX留言系统的实现过程，包括前端页面设计和后端处理逻辑。通过这个示例，读者可以了解如何使用AJAX进行异步数据提交，并在不刷新页面的情况下更新留言内容。

基于对XML的学习，想好好的学习一下AJAX。刚刚学习一个入门，模仿书中的例子，实践一下先。

jsp页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<script type="text/javascript">

function ajaxSubmit(path)

{

// 获取留言相关信息

var name = document.forms[0].name.value;

var email = document.forms[0].email.value;

var title = document.forms[0].title.value;

var content = document.forms[0].content.value;

// 创建XMLHttpRequest对象

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

// new XMLHttpRequest();

// 创建请求结果处理程序

xmlhttp.onreadystatechange = function()

{

if(xmlhttp.readyState==4 && xmlhttp.status==200)

{

var date = xmlhttp.responseText;

addMsg(date);

}

}

// 打开连接，true表示异步提交

xmlhttp.open("post",path+"/add.do",true);

// 当方法为post时需要如下设置http头

xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 发送数据

xmlhttp.send("name="+escape(name)+"&email="+escape(email)+"&title="+escape(title)+"&content="+escape(content));

}

// 添加留言信息的方法

function addMsg(date)

{

// 获取留言DIV的容器

var msg = document.getElementById("msgList");

// 创建新标签

var dl = document.createElement("dl");

var dt = document.createElement("dt");

var ddname = document.createElement("dd");

var ddcontent = document.createElement("dd");

// 插入标签

msg.insertBefore(dl,msg.firstChild);

dl.appendChild(dt);

dl.appendChild(ddname);

dl.appendChild(ddcontent);

dt.innerHTML = "标题："+document.forms[0].title.value;

ddname.innerHTML = "留言者："+document.forms[0].name.value+" 时间：" + date;

ddcontent.innerHTML = document.forms[0].content.value;

// 清空输入信息

document.forms[0].name.value="";

document.forms[0].title.value="";

document.forms[0].email.value="";

document.forms[0].content.value="";

}

</script>

</head>

<body>

<div id="msgList">

</div>

<div id="postBox">

<form action="/add.do">

<dl>

<dt>如果你有任何评论、问题、建议，请发邮件给我:</dt>

<dd>姓名:<input type="text" maxlength="150" size="45" name="name"/></dd>

<dd>Email:<input type="text" maxlength="150" size="45" name="email"/></dd>

<dd>标题：<input type="text" maxlength="150" size="45" name="title"/></dd>

<dd>内容<textarea rows="10" cols="45" name="content"></textarea></dd>

<dd>

<input type="button" onclick="ajaxSubmit('<%=request.getContextPath()%>');" value="发送留言" />

</dd>

</dl>

</form>

</div>

</body>

AddAction.java

package com.realsmy.mytangs.action;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

public class AddAction extends Action

{

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

{

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

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

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

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

// 与数据库交互进行处理，省略。

PrintWriter out = null;

try

{

out = response.getWriter();

} catch (IOException e)

{

e.printStackTrace();

}

out.print("2007-09-15");

return null;

}

}

这是对基于AJAX的开发模式的简单理解。

记录于此，继续学习。

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

添加红包

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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