STRUTS2： AJAX支持，stream類型或JSON類型result的AJAX實現(xiàn)加載下拉框【詩書畫唱】
CTRL+F:AJAX支持，stream類型result的AJAX實現(xiàn)，JSON類型result的AJAX實現(xiàn)。
地址欄輸入路徑的運行action，生成下拉框的例子。jquery中賦值用的val方法。stream類型result的AJAX實現(xiàn)的運行jsp界面就加載下拉框的例子。測試數(shù)據(jù)庫是否連上的打印語句?？蓪?nèi)容自動轉(zhuǎn)換為JSON的JSON插件包的專用屬性“map“。Ajax中取出JSON字符串中的對象屬性的方法。用ajax創(chuàng)建option下拉框的方法。JSON類型result的AJAX實現(xiàn)的數(shù)據(jù)庫和ajax，action，運行jsp界面就加載下拉框內(nèi)容的例子。沒有頁面跳轉(zhuǎn)的action（就是ajax實現(xiàn)的）。通過ajax請求來獲取下拉框中的數(shù)據(jù)的例子。
AJAX支持 PPT START
stream類型result的AJAX實現(xiàn)：
JSON類型result的AJAX實現(xiàn)：
AJAX支持 PPT END
講義 START
一、type="stream"類型結(jié)果
二、type="json"類型結(jié)果
struts2項目中的頁面中加載一個下拉框：
頁面跳轉(zhuǎn)方式，action中拼接html字符串，然后通過調(diào)用servletAPI實現(xiàn)
不需要頁面跳轉(zhuǎn)，可以使用ajax進行下拉框的數(shù)據(jù)加載：
使用json插件包：
1、導(dǎo)入struts2-json-plugin-2.3.24.1.jar
2、設(shè)置package的extends屬性為json-default
3、做struts配置
講義 END
例子 START
package com.jy.action;
import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.io.UnsupportedEncodingException;
import org.apache.struts2.ServletActionContext;
public class GameAction {
//將需要傳遞到頁面的html字符串放到ins中，
//就是回調(diào)函數(shù)中的data
private InputStream ins;
public InputStream getIns() {
return ins;
}
public void setIns(InputStream ins) {
this.ins = ins;
}
//http://localhost:8080/J190802/gm/toGameAc.action
? ? public String toGame(){
? ? String html = "<option>A</option><option>B</option><option>C</option>";
? ? ServletActionContext.getRequest().setAttribute("html", html);
? ? return "success";
? ? }
? ??
? ? public String loadData1(){
? ? String html = "<option>A</option><option>B</option><option>C</option>";
? ? ins = new ByteArrayInputStream(html.getBytes());
? ? return "success";
? ? }
? ??
? ? public String loadData2() throws UnsupportedEncodingException{
? ? String jsonStr = "{\"act\":\"張三\",\"pwd\":123}";? ?
? ? ins = new ByteArrayInputStream(jsonStr.getBytes("utf-8"));
? ? return "success";
? ? }
}
package com.jy.bean;
public class Userinfo {
? ? private Integer id;
? ? private String act;
? ? private String pwd;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getAct() {
return act;
}
public void setAct(String act) {
this.act = act;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
}
package com.jy.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.jy.bean.Userinfo;
import com.jy.util.DbUtil;
public class UserinfoDao {
? ? public List<Userinfo>selectAll(){
? ? String sql = "select * from userinfo";
? ?
? ? Connection conn = null;
? ? PreparedStatement pstm = null;
? ? ResultSet rs = null;
? ? List<Userinfo>list = new ArrayList<Userinfo>();
? ? try {
? ? ? ? conn = DbUtil.getConn();
pstm = conn.prepareStatement(sql);
? ? rs = pstm.executeQuery();
? ? while(rs.next()) {
? ? Userinfo u = new Userinfo();
? ? u.setId(rs.getInt("id"));
? ? u.setAct(rs.getString("act"));
? ? u.setPwd(rs.getString("pwd"));
? ? list.add(u);
? ? }
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
? ? return list;
? ? }
}
package com.jy.util;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Properties;
public class DbUtil {
private static String driverName;
? ? private static String url;
? ? private static String user;
? ? private static String pwd;
? ??
? ? static {
? ? //讀取properties文件
? ? Properties prop = new Properties();
? ? //將db.properties文件讀取到內(nèi)存中去
? ? InputStream is = DbUtil.class.getClassLoader()
? ? .getResourceAsStream("db.properties");
? ? //加載內(nèi)容
? ? try {
prop.load(is);
//讀取內(nèi)容
driverName = prop.getProperty("drivername");
url = prop.getProperty("url");
user = prop.getProperty("username");
pwd = prop.getProperty("password");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
? ? }
? ??
? ? //獲取數(shù)據(jù)庫連接對象的方法
? ? public static Connection getConn(){
? ? Connection conn = null;
? ? try {
Class.forName(driverName);
conn = DriverManager.getConnection(url,user,pwd);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}? ?
? ? return conn;
? ? }
? ??
? ? public static void close(ResultSet rs,PreparedStatement pstm
? ? ,Connection conn){
? ? ? ? try {
? ? ? ? if(rs != null) {
? ? ? ? ? ? rs.close();
? ? ? ? ? ? }
? ? ? ? ? ? if(pstm != null) {
? ? ? ? ? ? pstm.close();
? ? ? ? ? ? }
? ? ? ? ? ? if(conn != null) {
? ? ? ? ? ? conn.close();
? ? ? ? ? ? }
? ? ? ? } catch(Exception e) {
? ? ? ? e.printStackTrace();
? ? ? ? }
? ? }
}
drivername=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/firstjsp?useUnicode=true&characterEncoding=GBK2312
username=root
password=root
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
? <display-name>J190802</display-name>
? <!-- struts2框架的配置 -->
? <filter>
? ? ? <filter-name>struts2</filter-name>
? ? ? <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
? </filter>
? <filter-mapping>
? ? ? <filter-name>struts2</filter-name>
? ? ? <url-pattern>/*</url-pattern>
? </filter-mapping>
? <welcome-file-list>
? ? <welcome-file>index.html</welcome-file>
? ? <welcome-file>index.htm</welcome-file>
? ? <welcome-file>index.jsp</welcome-file>
? ? <welcome-file>default.html</welcome-file>
? ? <welcome-file>default.htm</welcome-file>
? ? <welcome-file>default.jsp</welcome-file>
? </welcome-file-list>
</web-app>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? ? ? <script type="text/javascript" srcc="js/jquery-1.11.0.js"></script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(function(){
? ? ? ? ? ? $.ajax({
? ? ? ? ? ? url: 'us/getAllNameAc.action',
? ? ? ? ? ? type: 'POST',
? ? ? ? ? ? dataType: 'JSON',
? ? ? ? ? ? success: function(data){
? ? ? ? ? ? //方法一html字符串
? ? ? ? ? ? //$('#nameSel').html(data);
? ? ? ? ? ? //方法二json字符串
? ? ? ? ? ? for(var i = 0;i < data.length;i ++){
? ? ? ? ? ? var act = data[i].act;
? ? ? ? ? ? //創(chuàng)建一個Option標簽
? ? ? ? ? ? var opt = new Option(act,act);
? ? ? ? ? ? $('#nameSel').get(0).add(opt);
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? })
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <select id="nameSel"></select>
? ? </body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"?
pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"
? ? +request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
?<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? </head>
? ? <body>
? ? ? ? <select id="game">${html }</select>
? ? </body>
</html>
<%@ page language="java" contentType="text/html;?
charset=UTF-8" pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"
? ? +request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? ? ? <script type="text/javascript" srcc="js/jquery-1.11.0.js"></script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(document).ready(function(){
? ? ? ? ? ? //通過ajax請求來獲取下拉框中的數(shù)據(jù)
? ? ? ? ? ? $.ajax({
? ? ? ? ? ? url: 'gm/ld1Ac.action',
? ? ? ? ? ? type: 'POST',
? ? ? ? ? ? data: {},
? ? ? ? ? ? success: function(data){
? ? ? ? ? ? $('#sel').html(data);
? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <select id="sel"></select>
? ? </body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
?pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"
? ? +request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? ? ? <script type="text/javascript" srcc="js/jquery-1.11.0.js"></script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? $(document).ready(function(){
? ? ? ? ? ? $.ajax({
? ? ? ? ? ? url: 'gm/ld2Ac.action',
? ? ? ? ? ? ? ? type: 'POST',
? ? ? ? ? ? ? ? dataType: 'json',
? ? ? ? ? ? ? ? success: function(data){
? ? ? ? ? ? ? ? //將json字符串轉(zhuǎn)換成js對象
? ? ? ? ? ? ? ? //var obj = JSON.parse(data);
? ? ? ? ? ? ? ? $('#act').val(data.act);
? ? ? ? ? ? ? ? $('#pwd').val(data.pwd);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <label>賬號：</label><input type="text" id="act" />
? ? ? ? <br>
? ? ? ? <label>密碼：</label><input type="text" id="pwd"/>
? ? </body>
</html>
例子 END
視頻筆記 START
地址欄輸入路徑的運行action，生成下拉框的例子 START
（代碼前面的“例子”中的內(nèi)容）
啟動eclipse中的服務(wù)器后瀏覽器輸入http://localhost:8080/J190802/gm/toGameAc.action，按回車后：
地址欄輸入路徑的運行action，生成下拉框的例子 END????
jquery中賦值用的val方法：
stream類型result的AJAX實現(xiàn)的運行jsp界面就加載下拉框的例子 START
stream類型result的AJAX實現(xiàn)的運行jsp界面就加載下拉框的例子 END
測試數(shù)據(jù)庫是否連上的打印語句：
可將內(nèi)容自動轉(zhuǎn)換為JSON的JSON插件包的專用屬性“map”：
Ajax中取出JSON字符串中的對象屬性的方法：
用ajax創(chuàng)建option下拉框的方法：
JSON類型result的AJAX實現(xiàn)的數(shù)據(jù)庫和ajax，action，運行jsp界面就加載下拉框內(nèi)容的例子 START
create table Userinfo(
id int primary key auto_increment,
act? varchar(100),
pwd? varchar(100)
);
insert into? Userinfo(
act,
pwd ) values("1","1");
insert into? Userinfo(
act,
pwd ) values("三連關(guān)注","22222");
insert into? Userinfo(
act,
pwd ) values("詩書畫唱","33333");
select *? ?from Userinfo
drop table Userinfo
drivername=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/firstjsp?useUnicode=true&characterEncoding=GBK2312
username=root
password=root
——
或
——
JSON類型result的AJAX實現(xiàn)的數(shù)據(jù)庫和ajax，action，運行jsp界面就加載下拉框內(nèi)容的例子 END
通過ajax請求來獲取下拉框中的數(shù)據(jù)的例子 START
沒有頁面跳轉(zhuǎn)的action（就是ajax實現(xiàn)的）：
通過ajax請求來獲取下拉框中的數(shù)據(jù)的例子 END
