应用AJAX+JSON+Struts2框架技术实现Web数据查询的应用示例(第3部分)

合集下载

AJAX案例

div 部分用于显示来自服务器的信息。

当按钮被点击时，它负责调用名为loadXMLDoc() 的函数：<html><body><div id="myDiv"><h3>Let AJAX change this text</h3></div><button type="button" onclick="loadXMLDoc()">Change Content</button></body></html>接下来，在页面的 head 部分添加一个 <script> 标签。

该标签中包含了这个loadXMLDoc() 函数：<head><script type="text/javascript">function loadXMLDoc(){.... AJAX script goes here ...}</script></head>AJAX - 创建 XMLHttpRequest 对象∙Previous Page∙Next PageXMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest 对象。

我用ajax获取后台数据并展示在前端页面的方法【源码】

我用ajax获取后台数据并展示在前端页面的方法【源码】WEB前端开发与传统的网页制作最大的一个区别就是：以前的网页制作只是涉及到一些图片制作、切图、然后实现静态页面的布局；而WEB前端开发既然涉及到开发，就会和后台打交道，后台或数据库里边的信息要根据用户的需求显示在前端特定的位置上，供用户查看。

所以现在的前端开发不仅仅是会点div、css或者是简单的javascript特效就可以了。

今天为大家说一下如何运用Ajax调用后台数据显示在前端页面。

源码中有详细的注释说明，只要懂得Ajax的基本工作原理和javascript和运行机制，就能看得懂。

下面是我在本地环境中测试的案例源代码：HTML部分：<table id="list"></table><button id="btn">NBA球星资料查询</button>CSS部分：*{margin:0px;padding:0px}tr{list-style:none;clear:both;margin-bottom:10px}table{counter-reset:count;margin:0px}tr:before{list-style:none;content:counter(count);counter-increment:count1;display:block;float:left;width:20px;height:20px;background:#ccc;color:#fff;text-align:center;line -height:20px;margin-right:10px}table tr td{padding:0px 10px;line-height:30px;font-size:14px}Javascript部分：var oList = document.getElementById("list");var oBtn = document.getElementById("btn");//点击按钮，加载后台内容oBtn.onclick = function(){ajax("get","admin.php",true);}//把从后台获取到的内容展示在前端function fn(data){var data = eval(data);var dLength = data.length;//alert(data.constructor);var str = "";for(var i=0; i<dLength; i++){str +="<tr><td>姓名：</td><td>"+data[i].name+"</td><td>所属球队：</td><td>"+data[i].belong+"</td></tr>"}oList.innerHTML = str;}//通过ajax获取后台数据function ajax(method,url,ayne){var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open(method,url,ayne);xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300){fn(xhr.responseText);}else{alert("程序有误！");}}}}提示：因为ajax只能在服务器运行，所以我在本地电脑安装了wampserve环境做的测试。

struts2+json+jquery实现ajax登录和注册功能

在上一篇博文中已经学习了如何整合mybatis和spring，实现持久层的CRUD操作、业务层的事务管理和spring的IoC。

现在我们这个demo的基础上，继续整合struts2，并利用json插件和jquery实现ajax，完成后系统将实现登录与注册的简单功能。

浏览器端如何简单、高效地与服务器端进行数据交互是web开发者最为关心的内容。

在客户端构造intput表单数据或者拼凑URL参数名称/参数值，然后在服务器端笨拙地用request.getParameter(“参数名称”)获取参数显然已经过时了，在struts2中，只要在action 里定义了input表单名称/URL参数名称对应的String类型属性，并设置getter和setter 方法，struts2在调用action的时候就可以根据参数值自动帮你设置好action中对应的属性值供你使用，这极大地方便了开发者。

但是json更为强大——它可以根据浏览器端上传的符合格式的数据设置action中对象的值，也就是说，struts2自动封装的数据只有一层，而json是无限层。

json给页面参数的传递带来极大的方便，结合jquery来使用，可以轻易地做到页面局部刷新、页面无跳转进行友好的系统异常提示等，其中后者是我觉得最有必要做到的一点，在action中定义一个message变量，把action方法执行的结果或者系统异常信息放到里面以json的方式返回给客户端，客户端根据这个变量的结果来进行下一步的操作或者提示系统异常信息，非常地好用。

json由javascript中的对象和数组构成，基本形式是{key:value}，key为属性名称，value 为属性值，value可以为数字、字符串、数组、对象，value可以为数组和对象是json可以封装无限层数据的关键所在。

至于如何建构和解析json不是本篇博文的详细表述范围，请参考其他资料。

现在就让我们利用struts2作为MVC框架，整合json插件，在浏览器端使用jquery解析和系列化json数据，由此制作一个具有登陆/注册功能的小demo。

ajax格式及用法

ajax格式及用法Ajax（AsynchronousJavaScriptandXML）是一种使用客户端脚本（通常是JavaScript）与服务器交互的强大技术。

通过Ajax，我们可以实现异步的、基于事件的、基于浏览器的数据请求，从而极大地提高了网页的交互性和响应性。

本篇文章将详细介绍Ajax的格式及用法。

一、Ajax请求格式Ajax请求的基本格式如下：`XMLHttpRequest对象.open(method,url,async,user,password);`其中，method表示请求方法，如GET或POST；url表示请求的URL；async表示是否异步请求，通常为true；user和password用于HTTP认证。

在请求中，我们通常会发送一些数据，这些数据可以以查询字符串的形式附加在URL之后，也可以作为POST请求的数据主体发送。

这些数据可以通过JavaScript对象来创建，或者从XML、JSON或其他数据源获取。

二、Ajax请求示例以下是一个简单的AjaxGET请求示例：`varxhr=newXMLHttpRequest();xhr.open("GET","data.json",true);xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){//请求成功，将返回的数据处理成JSON格式并输出到consolevardata=JSON.parse(xhr.responseText);console.log(data);}};xhr.send();`在这个示例中，我们创建了一个新的XMLHttpRequest对象，并打开了到"data.json"的GET请求。

当请求状态改变时，我们检查请求是否成功，并使用JSON.parse将返回的文本转换为JSON格式。

使用struts2、数据库、JSP实现增、删、改、查源码

Action 包下面的class文件：package action;import erDao;import erDaoImp;import er;public class UserAction {private User user;public String add(){UserDao userDao = new UserDaoImp();try {userDao.save(user);return"success";} catch (Exception e) {e.printStackTrace();return"error";}}public String update(){UserDao userDao = new UserDaoImp();try {userDao.updata(user);System.out.print("----");return"success";} catch (Exception e) {e.printStackTrace();return"error";}}public String delete(){UserDao userDao = new UserDaoImp();try {userDao.deleteById(user.getId());return"success";} catch (Exception e) {e.printStackTrace();return"error";}}public String show(){UserDao userDao = new UserDaoImp();try {user = userDao.findById(user.getId());return"success";} catch (Exception e) {e.printStackTrace();return"error";}}public User getUser() {return user;}public void setUser(User user) {er = user;}}package action;import java.util.List;import erDao;import erDaoImp;import er;public class UserListAction {private List<User> users;public List<User> getUsers() {return users;}public void setUsers(List<User> users) { ers = users;}public String execute(){UserDao userDao = new UserDaoImp();try {users = userDao.findAll();return"success";} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();return"error";}}}Dao 下面的class文件package dao;import java.util.List;import er;public interface UserDao {public void save(User user) throws Exception;public void updata(User user) throws Exception;public void deleteById(int id) throws Exception;public User findById(int id) throws Exception;public List<User> findAll() throws Exception;}Daoimpl包下面的class文件package daoimp;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.util.ArrayList;import java.util.List;import util.DBUtil;import erDao;import er;public class UserDaoImp implements UserDao {static final String insert = "insert into t_user(username,pwd,age) values(?,?,?)";static final String findAll = "select * from t_user";static final String delete = "delete from t_user where id=?";static final String findById = "select * from t_user where id=?";static final String update = "update t_user set username=?,pwd=?,age=? where id=?";public List<User> findAll() throws Exception {Connection con = DBUtil.getConnection();PreparedStatement pst = con.prepareStatement(findAll);ResultSet rs = pst.executeQuery();List<User> users = new ArrayList<User>();while(rs.next()){User user = new User();user.setId(rs.getInt("id"));user.setUsername(rs.getString("username"));user.setPassword(rs.getString("pwd"));user.setAge(rs.getInt("age"));users.add(user);}con.close();return users;}public User findById(int id) throws Exception {Connection con = DBUtil.getConnection();PreparedStatement pst = con.prepareStatement(findById);pst.setInt(1, id);ResultSet rs = pst.executeQuery();if(rs.next()){User user = new User();user.setId(rs.getInt("id"));user.setUsername(rs.getString("username"));user.setPassword(rs.getString("pwd"));user.setAge(rs.getInt("age"));return user;}DBUtil.close(con);return null;}@Overridepublic void deleteById(int id) throws Exception {// TODO Auto-generated method stubConnection con = DBUtil.getConnection();PreparedStatement pstmt = con.prepareStatement(delete);pstmt.setInt(1, id);pstmt.executeUpdate();con.close();}@Overridepublic void save(User user) throws Exception {// TODO Auto-generated method stubConnection con = DBUtil.getConnection();PreparedStatement pstmt = con.prepareStatement(insert);pstmt.setString(1, user.getUsername());pstmt.setString(2, user.getPassword());pstmt.setInt(3, user.getAge());pstmt.executeUpdate();con.close();}@Overridepublic void updata(User user) throws Exception {// TODO Auto-generated method stubConnection con = DBUtil.getConnection();PreparedStatement pstmt = con.prepareStatement(update);pstmt.setString(1, user.getUsername());pstmt.setString(2, user.getPassword());pstmt.setInt(3, user.getAge());pstmt.setInt(4, user.getId());pstmt.executeUpdate();con.close();}}实体层entity包下面的class文件：package entity;public class User {private int id;private String username;private String password;private int age;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {ername = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}}JSP文件：Add.jsp<body><form action="add.action"method="post"><table border="1"align="center"><tr><td>UserName:</td><td><input type="text"name="ername"></td> </tr><tr><td>PassWord:</td><td><input type="password"name="user.password"></td> </tr><tr><td>Age:</td><td><input type="text"name="user.age"></td></tr><tr align="center"><td colspan="2"><input type="submit"value="添加"><a href="list.action">查看用户列表</a></td></tr></table></form></body>Error.jsp<body><h1>系统错误!请稍候重试....!</h1><br></body>List.jsp<body><table border="1"align="center"><tr><th>ID:</th><th>UserName:</th><th>Age:</th><th>相关操作</th></tr><s:iterator value="users"> <tr><td><s:property value="id"/></td><td><s:property value="username"/></td><td><s:property value="age"/></td><td><a href='delete.action?user.id=<s:property value="id"/>'>删除</a><a href='show.action?user.id=<s:property value="id"/>'>查看</a><a href='update_init.action?user.id=<s:property value="id"/>'>修改</a></td></tr></s:iterator><tr align="center"><td colspan="4"><a href="add.jsp">添加</a></td> </tr></table><br/></body>Show.jsp<body>用户名:<s:property value="ername"/><br>密  码:<s:property value="user.password"/><br>年  龄:<s:property value="user.age"/><br><a href="list.action">返回</a></body>Update.jsp<body><h1>用户更新</h1><s:form action="update"theme="simple"method="post"><s:textfield name="user.id"/>用户名:<s:textfield name="ername"/><br/>密  码:<s:password name="user.password" showPassword="true"/><br/>年  龄:<s:textfield name="user.age"/><br/><input type="submit"value="更新"><a href="list.action">查看用户列表</a></s:form></body>。

Struct2_使用Ajax调用Action方法并返回值

Struct2_使⽤Ajax调⽤Action⽅法并返回值⼀、Login.jsp1、<head>引⼊jquery：<script type="text/javascript"src="/ajax/jQuery/jquery-1.7.1.js"></script>2、界⾯控件：⽤户名：<input type="text"id="userName"><input type="button"id="btnAjax"value="Ajax调⽤"/>3、提交ajax请求<script type="text/javascript">$(function() {$("#btnAjax").click(function() {var userName = $("#userName").val().trim();if (userName == '') {alert("⽤户名不能为空");return false;}//login1为Action类命名空间名称；AjaxExecute为Action⽅法名称$.ajax({type : "post",url : '/login1/ajaxExecute',data : {//设置数据源userName : userName,password : "我是密码"},dataType : "json",//设置需要返回的数据类型success : function(d) {alert(d.sayHi);},error : function(d) {alert(d.responseText);}});});});</script>⼆、后台类：LoginActionNoNamespcepackage action;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;import java.util.Map;import org.apache.struts2.convention.annotation.Action;import space;import org.apache.struts2.convention.annotation.ParentPackage;import org.apache.struts2.convention.annotation.Result;import org.apache.struts2.interceptor.validation.SkipValidation;import freemarker.template.SimpleDate;@ParentPackage("json-default")@Namespace("/login1")public class LoginActionNoNamespce extends SuperActionSupport {private static final long serialVersionUID = 1L;private Map<String, String> dataMap;//会把本类所有getter⽅法序列化成字符串返回给jsp页⾯public Map<String, String> getDataMap() {return dataMap;}public void setDataMap(Map<String, String> dataMap) {this.dataMap = dataMap;}@SkipValidation@Action(value = "ajaxExecute", results = { @Result(type = "json", params = { "root", "dataMap" }) })public String ajaxExecute() throws Exception {this.dataMap = new HashMap<String, String>();// 参数名称必须和jsp的空间名称⼀⼀对应String userName = request.getParameter("userName");String password = request.getParameter("password");dataMap.put("isSuccess", "true");SimpleDateFormat now = new SimpleDateFormat("yyyy年MM⽉dd⽇ HH时mm分ss秒");dataMap.put("sayHi", "Hi:" + userName + " 当前时间为：" + now.format(new Date()) + password);return SUCCESS;}}三、注意事项1. 类注解：@ParentPackage("json-default")，⽐如为json-default，不能为struts-defaultjson-default是继承于structs-default的,见.m2\repository\org\apache\struts\struts2-json-plugin\2.3.16.3\struts2-json-plugin-2.3.16.3.jar\struts-plugin.xml2. Action注解：@Action(value = "ajaxExecute", results = { @Result(type = "json", params = { "root", "dataMap" }) })，这⾥的type必须为json、root是固定值，去掉params节点会返回undefined3. 这⾥的dataMap定义为：private Map<String, String> dataMap;必须要添加getter、setter参数，否则返回null4. JSP页⾯（这⾥可以⽤命名空间，如url : '/login1/ajaxExecute', @ParentPackage("json-default")这样设置就不会报错）5. maven管理，需要引⽤的库<dependencies><dependency><groupId>org.apache.struts</groupId><artifactId>struts2-core</artifactId><version>2.3.16</version><exclusions><exclusion><groupId>org.javassist</groupId><artifactId>javassist</artifactId></exclusion></exclusions></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version></dependency><dependency><groupId>org.apache.struts</groupId><artifactId>struts2-convention-plugin</artifactId><version>2.3.16.3</version></dependency><dependency><groupId>org.apache.struts</groupId><artifactId>struts2-json-plugin</artifactId><version>2.3.16.3</version></dependency><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</version></dependency></dependencies>。

Struts2详细实例教程

Struts2（上）一、经典的MVC模式二、Struts1.x对MVC的实现三、Struts1.x的主要组件和作用组件作用ActionServlet 中央控制器Action 分控制器，调用JavaBean实现业务逻辑，Action可以分为Action、DispatchAction等不同类型ActionForm 封装参数，实现服务器验证，文件上传等Forward 转发到目的地，可以是JSP，也可以是另一个ActionStruts-config.xml 配置文件，配置有ActionForm,Action,Forward等，通过XML解析，然后使用反射技术使用该文件Struts标签库和JSTL类似，和Struts-config.xml、ActionForm、Action等对象可以紧密集成四、Struts1.x 开发实例-登录程序见案例。

五、Struts2（WebWork）的MVCStruts2的MVC架构六、Struts2的主要组件组件作用FilterDispatcher 起中央控制器作用的过滤器Action 处于Model层的Action，调用JavaBean实现业务逻辑struts.xml 核心配置文件，配置有Action、Result等result 和forward类似，转发的目的地，支持多种视图技术。

七、Struts2的实例-登录在MyEclipse环境中建立一个新的web工程，名称“Struts2Login”，存放路径“f:\Struts2Login”。

在Struts2.0.11版本中找到war包struts2-blank-2.0.11.war，解开该war包，在WEB-INF/lib 目录下复制出所有的jar包，这些jar包就是一个Struts2程序所需要的基础jar包，把它们复制到新建的web工程的WEB-INF/lib目录中。

在src目录下建立一个类，包名mypack，类名UserAction，其代码如下：package mypack;import com.opensymphony.xwork2.ActionSupport;public class UserAction extends ActionSupport {private String username;private String userpass;public String getUsername() {return username;}public void setUsername(String username) {ername = username;}public String getUserpass() {return userpass;}public void setUserpass(String userpass) {erpass = userpass;}@Overridepublic String execute() throws Exception {if ("Mike".equals(username) && "123".equals(userpass)|| "张三".equals(username) && "abc".equals(userpass))return "success";elsereturn "error";}}在src目录下建立Struts2的配置文件struts.xml，内容如下：<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN""/dtds/struts-2.0.dtd"><struts><package name="actions" extends="struts-default"><action name="login" class="erAction"><result name="success">/Success.jsp</result><result name="error">/Error.jsp</result></action></package></struts>修改web.xml，在其中加入一个过滤器，过滤/*路径。

Ajax技术在Web2.0中的应用

ＮＴ０ＫＮ０ＭＮＣＮＥＷＲＤＣＭＵＩ Ⅱ ＡＡ０
网络与通信
Ａａ技术在Ｗｅ２ｊｘｂ．的应用０中
田太平
（江苏通裕纺织集团信息中心，扬州２５０）２０９
摘要：Ａａ一种创建交互式网页应用的网页开发技术，改变了传统Ｗｅ用的交互模式，为用户提供了动态、ｊｘ是ｂ应
Ａｓｒｃ：ｊｘｉａＷｅｐｌａｉｒｒａｉｔｒｃｖｂｄｖｌｍｅｔｅｈｏｇｅ．ｈｎｅｅｔｄｔｎｌｎｅ— ｂｔａｔＡａｂａｐｉｔｎｆｅｔｇｉｅａｔｅＷｅｅｅｐｎｃｎｌｉＩｃａｇｄｔａｉｏａｔｓｃｏｏｃｎｎｉｏｔｏｓｔｈｒｉｉｒ
览器用ＪｖＳｒｔ本解析数据并通过局部刷新页面来显示数ａａｃｉ脚ｐ
据。通过使用Ａａ，Ｗｅ用程序不仅保留了本身易部署、ｊｘｂ应移植性好的特点，还可以创建接近本地桌面应用的更直接、更丰富、更动态的用户界面，增强用户体验。ａａ在客户端可以跨浏览器，在服务器端可以兼容大多数主ｊｘ流技术，例如：．Ｅ，ＰＰａａ，该技术普及的相当迅速。ＮＴＨ，Ｊｖ等
快速、灵活的操作体验。
关键词：ａａｊｘ；ＪｖＳｆｔ异步通信ａａｃｐ；ｉ
ＴｅＡｐｉａｏｆｊｘＴｃｎｌｔｉｂ．ｈｐｌｔｎｏａｅｈｏｏＷｅ２０ｃｉＡｙｎ
．ＮａｐｎＩ１Ｔｉｉｇ（ｈｆｒｔｎＣｎｅｏａｇｕＴｎｙｅｔｅＧｏｐ，ａｇｈｕ２５０）ＴｅＩｏｍａｉｅｔｒｆｉｎｓｏｇｕＴｘｉｒｕＹｎｚｏ２０９ｎｏＪｌ

Web前端开发实训案例教程初级AJAX异步请求与数据交互

Web前端开发实训案例教程初级AJAX异步请求与数据交互在Web前端开发中，实现异步请求和数据交互是一个非常重要的技能。

AJAX（Asynchronous JavaScript and XML）是一种用于在Web应用程序中向服务器发送和接收数据的技术，它可以实现页面的无刷新更新，提升用户体验。

本文将介绍初级AJAX异步请求和数据交互的案例教程。

一、AJAX基础知识概述AJAX使用JavaScript和XML来实现异步数据交互。

在传统的Web 开发中，页面的更新通常需要重新加载整个页面，这对于用户体验来说是一个很大的缺点。

而AJAX可以通过局部更新页面的方式，只重新加载需要变化的部分，从而提升用户的交互体验。

AJAX的基本原理是通过XMLHttpRequest对象向服务器发送异步请求，然后在服务器返回数据后再进行页面的更新。

在实际开发中，可以使用现代的Web开发框架如jQuery等来简化AJAX的操作。

二、案例教程：实现实时搜索建议功能在本案例教程中，我们将展示如何使用AJAX实现一个实时搜索建议功能。

该功能可以在用户输入关键词时，实时向服务器发送请求获取匹配的搜索建议，并将结果显示在页面上。

1. 准备工作首先，我们需要准备一个用于接收搜索请求的后端API。

这个API 可以是一个简单的服务器接口，接收带有关键词参数的GET请求，并返回匹配的搜索建议结果。

2. 前端代码实现在HTML页面上，我们需要添加一个输入框和一个用于展示搜索建议的区域。

用户输入关键词时，将触发一个JavaScript函数，该函数将使用AJAX向后端API发送请求，并将返回的结果渲染到页面上。

以下是一个简单的示例代码：```html<input type="text" id="keyword" onkeyup="getSuggestions()"><ul id="suggestions"></ul><script>function getSuggestions() {var keyword = document.getElementById("keyword").value;var url = "/api/suggestions?keyword=" + keyword;// 创建XMLHttpRequest对象var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {var suggestions = JSON.parse(xmlhttp.responseText);var suggestionsList = document.getElementById("suggestions");suggestionsList.innerHTML = "";// 渲染搜索建议for (var i = 0; i < suggestions.length; i++) {var li = document.createElement("li");li.appendChild(document.createTextNode(suggestions[i]));suggestionsList.appendChild(li);}}};// 发送AJAX请求xmlhttp.open("GET", url, true);xmlhttp.send();}</script>```以上代码使用了原生的JavaScript来实现AJAX请求和数据的更新。

C#开发的WebService使用JSON格式传递数据+Ajax测试

C#开发的WebService使⽤JSON格式传递数据+Ajax测试0 2因為⼀些因素，必須改寫WebService，很傳統，但是很多公司還在⽤..因為XML 的關係，不想讓他傳遞資料的時候過度肥⼤，所以我必須要盡量乾淨的JSON..於是開始我的改寫旅程..0 2⾸先，網路上好多好多好多⽂件，可能因為狀況不同，測試過許多也讓我搞混很多次..最後有找到答案..筆記⼀下..0 2⾸先我開了三個不同的WebMethod 來測試三種不同的輸出..0 2GetUserInfoString –取得字串GetOneUserInfo - 取得⼀個物件GetUsers - 取得物件們0 2using System.Collections.Generic;using System.Web.Script.Services;using System.Web.Services;namespace JsonServiceSample{public class User{public string Name { get; set; }public int Age { get; set; }}[WebService(Namespace = "", Description = "For Donma Test")][ponentModel.ToolboxItem(false)][ScriptService]public class Service1 : WebService{[WebMethod][ScriptMethod(ResponseFormat = ResponseFormat.Json)]public string GetUserInfoString(string name, int age){return name + "," + age;}[WebMethod][ScriptMethod(ResponseFormat = ResponseFormat.Json)]public User GetOneUserInfo(string name, int age){return (new User { Name = name, Age = age });}[WebMethod][ScriptMethod(ResponseFormat = ResponseFormat.Json)]public User[] GetUsers(string name, int age){List<User> res = new List<User>();res.Add(new User { Name = name + "1", Age = age });res.Add(new User { Name = name + "2", Age = age });return res.ToArray();}}}0 2如這篇 0 2 0 2 我先移除xml namespace再來⼀個重點，在每⼀個Method 上⽅我都會加上0 20 2[WebMethod][ScriptMethod(ResponseFormat = ResponseFormat.Json)]因為基於有時候我會需要使⽤GET ⽅式傳遞所以我在Web Config 中加⼊在system.web 中加⼊0 2<webServices><add name="HttpGet"/><add name="HttpPost" /><add name="Documentation" /></protocols></webServices>0 2Web.Config 全⽂:0 2<?xml version="1.0"?><configuration><configSections><sectionGroup name="applicationSettings" type="System.Configuration.ApplicationSettingsGroup, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" ><section name="JsonServiceSample.Properties.Settings" type="System.Configuration.ClientSettingsSection, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" </sectionGroup></configSections><system.web><compilation debug="true" targetFramework="4.0" /><httpHandlers></httpHandlers><webServices><protocols><add name="HttpGet"/><add name="HttpPost" /><add name="Documentation" /></protocols></webServices></system.web><applicationSettings><JsonServiceSample.Properties.Settings><setting name="JsonServiceSample_JTestService_Service1" serializeAs="String"><value>http://localhost:5403/Service1.asmx</value></setting></JsonServiceSample.Properties.Settings></applicationSettings></configuration>0 2這樣試跑⼀下0 20 2奇怪為什麼不是JSON ，別緊張…我們繼續使⽤ JQuery 來呼叫看看..0 2JQuery Code :0 20 2<input type="button" id="ipt1" value="test" /><script type="text/javascript">1: 0 22: function GetInfo() {3: var $res;4: $.ajax({5: type: "POST",6: url: "Service1.asmx/GetOneUserInfo",7: contentType: "application/json; charset=utf-8",8: async: false,9: cache: false,10: dataType: 'json',11: data: "{name:'當⿇',age:29}",12: success: function (data) {13: if (data.hasOwnProperty("d")) {14: $res = data.d;15: }16: else17: $res = data;18: }19: });20: return $res;21: }22:24: $('#ipt1').click(function () {25: var res = GetInfo();26: alert();27: });28:29:</script>按鈕按下去之後我讓他呼叫 GetOneUserInfo 這 method並且使⽤POST看下結果..0 20 2恩恩..的確是JSON，但是多了⼀個 d 0 2 跟 __type 基本上 0 2 __type 不要去動他是不影響，但是 0 2 d 這東西必須得處理..所以我參考這⼀篇 :進⾏改寫..實測過上⾯三種不同的回傳值..都 OK~~0 2這樣對於傳統的 WebService Reference 呼叫 0 2 WebService 不會有影響..也可以透過JQuery 呼叫傳遞透過JSON…筆記⼀下..給需要的⼈…。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1.1应用AJAX+JSON+Struts2框架技术实现Web数据查询的应用示例（第3/4部分）1.1.1解决AJAX表单请求中的中文乱码问题方法之二如果前端的JSP页面及后台的Struts2框架的Action程序类都统一采用utf-8的字符集编码，则能够更简单地解决中文乱码问题。

1、修改ajaxQueryStudentInfo.jsp页面中的字符集设置定义将ajaxQueryStudentInfo.jsp页面中的page指令的字符集设置为utf-8编码。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>应用AJAX技术的异步查询学生信息页面</title><script type="text/javascript" language="javascript"src="${pageContext.request.contextPath}/javascript/json2.js"> </script><script type="text/javascript" language="javascript"src="${pageContext.request.contextPath}/javascript/queryStudentInfo.js"> </script></head><body>学生专业：<input type="text" name="inputMajor" id="inputMajorTagID" size="20"> <input type="button" value="查询"onclick="queryStudentInfo('inputMajorTagID','showDataTableTagID','showDataTableTagTBodyI D','${pageContext.request.contextPath}');"><table width='433' border='1' style="display:none" id="showDataTableTagID"> <thead><tr><th width='102'>姓名</th><th width='104'>性别</th><th width='91'>年龄</th><th width='86'>专业</th></tr></thead><tbody id="showDataTableTagTBodyID"></tbody></table></body></html>2、修改queryStudentInfo.js文件的代码在JS程序代码中不需要对请求的参数进行任何的编码转换。

/**定义一个对象变量*/var xmlHttpRequest;var showDataTableTagID_Global;var showDataTableTagTBodyID_Global;function queryStudentInfo(inputMajorTagID, showDataTableTagID_Local, showDataTableTagTBodyID_Local, webContextURL){/*** 缓存所获得的显示查询结果数据的表格标签的ID*/showDataTableTagID_Global=showDataTableTagID_Local;showDataTableTagTBodyID_Global=showDataTableTagTBodyID_Local;var requestURL=webContextURL+"/ajaxQueryStudentInfo.action";xmlHttpRequest = createXMLHttpRequest();xmlHttpRequest.onreadystatechange = getResultData_FromServer;/**设置请求的各种工作参数*/xmlHttpRequest.open("post",requestURL, true);xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");/*** 获得操作者所输入的学生专业，并作为查询参数提交给服务器端Servlet程序*/var studentMajorInputed=window.document.getElementById(inputMajorTagID).value;xmlHttpRequest.send("studentMajor="+studentMajorInputed);}/**下面的getResultData_FromServer函数是获得服务器端程序的返回值*/function getResultData_FromServer(){/**识别浏览器是否"正要(正在)"接收访问器端程序返回的数据？*/if(xmlHttpRequest.readyState == 4){/**识别浏览器是否"数据已经接收完毕" ？*/if(xmlHttpRequest.status == 200){/***下面的代码是获得服务器端返回的JSon格式的数据，但要注意的是，* 由于服务器端直接通过response返回的数据为文本格式，* 因此要采用xmlHttpRequest.responseText获得*/var jsonAllStudentObjectFromServlet= JSON.parse(xmlHttpRequest.responseText);/*** 下面的代码是将所获得的服务器端返回的JSon格式的对象集合数据在页面中显示出*/showQueryStudentInfoInSomeTable(jsonAllStudentObjectFromServlet);}else if(xmlHttpRequest.status ==400){window.alert("你的请求无效！");}else if(xmlHttpRequest.status ==404){window.alert("你向服务端程序请求的URL不正确，未找到请求的目标文件！");}else if(xmlHttpRequest.status ==500){window.alert("服务器由于遇到错误而不能完成该请求！");}else if(xmlHttpRequest.status ==505){window.alert("HTTP版本不受支持！");}else{window.alert("出现了其它不知名的错误！");}}}function showQueryStudentInfoInSomeTable(jsonAllStudentObjectFromServlet){ /**oneTRTagObject 代表<tr>标签对象*/var oneTRTagObject;/**首先获得表格<table>标签对象*/var showDataTableTagObject=window.document.getElementById(showDataTableTagID_Global);var showDataTableTagTBodyObject =window.document.getElementById(showDataTableTagTBodyID_Global);/**删除<tbody>标签中的原来的所有的<tr>标签，从而达到删除原来的查询结果数据*/while(showDataTableTagTBodyObject.rows.length >0){showDataTableTagTBodyObject.deleteRow(showDataTableTagTBodyObject.rows.length-1) ;}/**再添及新的表格数据行*/for(var loopIndex=0;loopIndex < jsonAllStudentObjectFromServlet.length;loopIndex++){ /*** 从对象数组中获得某个学生信息对象*/var oneStudentInfoObject = jsonAllStudentObjectFromServlet[loopIndex];oneTRTagObject=window.document.createElement("tr");var oneNameDataTDTagObject=window.document.createElement("td");/*** 获得某个学生的姓名*/oneNameDataTDTagObject.innerHTML =oneStudentInfoObject.studentName;oneTRTagObject.appendChild( oneNameDataTDTagObject);var oneSexDataTDTagObject=window.document.createElement("td");/*** 获得某个学生的性别*/oneSexDataTDTagObject.innerHTML =oneStudentInfoObject.studentSex;oneTRTagObject.appendChild( oneSexDataTDTagObject);var oneAgeDataTDTagObject=window.document.createElement("td");/*** 获得某个学生的年龄*/oneAgeDataTDTagObject.innerHTML =oneStudentInfoObject.studentAge;oneTRTagObject.appendChild( oneAgeDataTDTagObject);var oneMajorDataTDTagObject=window.document.createElement("td");/*** 获得某个学生的专业*/oneMajorDataTDTagObject.innerHTML =oneStudentInfoObject.studentMajor;oneTRTagObject.appendChild(oneMajorDataTDTagObject);/**将动态构建出的<tr>标签对象加到<tbody>标签对象中*/showDataTableTagTBodyObject.appendChild(oneTRTagObject);}/**由于<table>标签默认为隐藏的，因此必须打开它*/showDataTableTagObject.style.display ="inline";}/**下面的createXMLHttpRequest实现创建XMLHttpRequest对象*/function createXMLHttpRequest(){var xmlHttpRequest_Local;/**识别用户所使用的浏览器的类型*/if(window.XMLHttpRequest){/**说明用户的浏览器是"非IE"系列*/xmlHttpRequest_Local = new XMLHttpRequest();}else if(window.ActiveXObject){/**说明用户的浏览器是"IE"系列*/try{xmlHttpRequest_Local = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{xmlHttpRequest_Local = new ActiveXObject("Microsoft.XMLHTTP");}catch(e){window.alert("你的IE系列浏览器不支持AJAX技术！");}}}else{window.alert("你的浏览器不支持AJAX技术！");}return xmlHttpRequest_Local;}3、在AJAXQueryStudentInfo类中的setStudentMajor方法也不需要进行编码转换response.setCharacterEncoding("utf-8");package com.bluedream.struts2demo.action;import java.io.IOException;import java.io.PrintWriter;import java.io.UnsupportedEncodingException;import java.util.ArrayList;import java.util.List;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.apache.struts2.ServletActionContext;import com.bluedream.struts2demo.dao.StudentInfoPO;import com.opensymphony.xwork2.ActionSupport;public class AJAXQueryStudentInfo extends ActionSupport {/*** 下面的studentMajor变量代表表单传递的查询条件*/private String studentMajor=null;/*** 下面的queryResultJSonFormat变量代表查询的结果的JSon格式的对象字符串*/private String queryResultJSonFormat=null;public String getStudentMajor() {return studentMajor;}public void setStudentMajor(String studentMajor) {this.studentMajor = studentMajor;}public String getQueryResultJSonFormat() {return queryResultJSonFormat;}public void setQueryResultJSonFormat(String queryResultJSonFormat) {this.queryResultJSonFormat = queryResultJSonFormat;}public AJAXQueryStudentInfo() {}/*** 下面的方法实现对基于AJAX德异步请求进行响应处理，由于在该方法中直接通过response对象将所获得的JSon对象格式字符串发送浏览器客户端，因此不需要返回结果String类型*/public void querySomeStudentInfos(){/*** 下面的代码模拟数据库的查询结果*/List<StudentInfoPO> allStudentInfoPOList=new ArrayList<StudentInfoPO>();StudentInfoPO oneStudentPO=new StudentInfoPO();oneStudentPO.setStudentName("张三");oneStudentPO.setStudentAge(20);oneStudentPO.setStudentSex("男");oneStudentPO.setStudentMajor(studentMajor);allStudentInfoPOList.add(oneStudentPO);StudentInfoPO twoStudentPO=new StudentInfoPO();twoStudentPO.setStudentName("李四");twoStudentPO.setStudentAge(21);twoStudentPO.setStudentSex("女");twoStudentPO.setStudentMajor(studentMajor);allStudentInfoPOList.add(twoStudentPO);StudentInfoPO threeStudentPO=new StudentInfoPO();threeStudentPO.setStudentName("王五");threeStudentPO.setStudentAge(22);threeStudentPO.setStudentSex("男");threeStudentPO.setStudentMajor(studentMajor);allStudentInfoPOList.add(threeStudentPO);StudentInfoPO fourStudentPO=new StudentInfoPO();fourStudentPO.setStudentName("赵六");fourStudentPO.setStudentAge(19);fourStudentPO.setStudentSex("女");fourStudentPO.setStudentMajor(studentMajor);allStudentInfoPOList.add(fourStudentPO);/*** 下面的代码将查询结果的List集合对象转换为JSon格式的对象字符串*/JSONArray allStudentInfoPOList_JSONArray =JSONArray.fromObject(allStudentInfoPOList);/*** 将所获得的JSon格式的对象转换为标准的字符串，并保存到结果变量中*/queryResultJSonFormat=allStudentInfoPOList_JSONArray.toString();/*** 获得response对象并将所获得的JSon格式的对象字符串发送到浏览器客户端JS 程序中。