struts2 + jquery + json 进行ajax请求
项目中想用ajax
,于是在网上扒了
n
多资料,犯了
n
多错误,从今天上班到现在一直在处理这个问题,终于还是把它解决了。
当我看到页面的ajax
显示后,我兴奋异常,为了记录自己学习的
ajax
历程,也为了让更多的人少走弯路,特写此一文以记之!
废话不说了,为了更好的理解,我重做了一个小的项目,以加深印象。现在就以这个小项目开始我们的ajax
之旅。
第一步:创建 名为"
ajax" 的 Java Web
项目。
第二步:加入struts2
的
jar
包,这里需要四个包
freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar commons-io.jar xwork-core-2.1.6.jar
(这个包加上版本号,是因为下文要提到它),这六个包是
struts
必须依赖的
jar
包,什么好说的。
第三步:修改 web.xml
加入
struts
的过滤器,代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
第四步:加入json
的包,这里需要两个:
json-lib.jar jsonplugin.jar
这里要注意很重要的一点,因为
json
大量引用了
Apache commons
的包,所以这里要一并加入,需要的
commons
包共
4
个,除了
commons
的包外,还需要引入一个
ezmorph
的包,所以这一步一共要引入
7
个包,列出如下:
commons-collections
相关文档:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=Conditional>
<ContentTemplate>
<%=DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel> ......
jQuery是一个可以简化 JavaScript?以及AJAX(Asynchronous JavaScript
+XML,异步Javascript和XML)编程的Javascript库。不同于其他的Javascript库,jQuery有他自己的哲学,使你可
以很简单的编写代码。这篇文章就会带领你见识一下jQuery的哲学,探讨一下他的特性以及功能,并且会做一些ajax的示例,以及如何使用plug-
......
//创建XMLHttpRequest对象,需要根据IE和浏览器类型创建不同的xhr对象
var xhrobj;
function check()
{
//获取文本框的值
var username = document.getElementById("username").value;
if(window.XMLHttpRequest)
{
//针对firefox,Mozilla,ie7,ie8等
xhrobj = new XMLHttpRequest();
/ ......
$(function(){
new AjaxUpload('file1', {
action: 'uploadpic.asp',
name: 'form1',
data:{act:'uploadfile',FormName:'form1'},
autoSubmit:false,
responseType:'json',
onSubmit:function(file,ext){
if (!(ext && /^(jpg|png|gif)$/i.test(ext))){
alert('请您上传 ......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0044)http://www.qqip.cn -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE>
<META ht ......