我想問可否用Ajax取得用struts2 action從資料庫撈出來的值?
我想問可否用Ajax取得用struts2 action從資料庫撈出來的值?
因為我struts2已經與SPRING HIBERNATE整合好了
所以想說若要增加用AJAX的功能 是否可以讓AJAX取得ACTION回傳的值
而不用導頁 因為struts2 一導頁 有AJAX的頁面就全更新的
我下面的CODE是STRUTS會導回給自己 但這樣AJAX就有問題了
以下是我的CODE
------這是action的CODE--------------------------
package com.mkyong.user.action;
//import org.springframework.context.ApplicationContext;
//import org.springframework.context.support.FileSystemXmlApplicationContext;
//import java.awt.print.Book;
//import org.springframework.context.ApplicationContext;
//import org.springframework.context.support.FileSystemXmlApplicationContext;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import java.io.PrintWriter;
import com.mkyong.user.bo.UserBo;
import com.mkyong.user.hibernate.Book;
import com.mkyong.user.service.BookService;
import com.mkyong.user.service.BookServiceImpl;
import com.opensymphony.xwork2.ActionSupport;
public class UserSpringAction extends ActionSupport{
//DI via Spring
UserBo userBo;
//UserBo bookDAO; //丟給SERVICE去處理了
BookService bookService;
private String name;
private String price;
private String status; //這要給false.jsp來判斷 拿到誰的
public UserBo getUserBo() {
return userBo;
}
public void setUserBo(UserBo userBo) {
this.userBo = userBo;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
/*public UserBo getBookDAO() {
return bookDAO;
}
public void setBookDAO(UserBo bookDAO) {
this.bookDAO = bookDAO;
} */
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
public BookService getBookService() {
return bookService;
}
public void setBookService(BookService bookService) {
this.bookService = bookService;
}
public String execute() throws Exception {
// price = userBo.queryBook(name);
// Book book = bookDAO.getBook("yaya");
// price = book.getBookPrice();
// ApplicationContext context = new ClassPathXmlApplicationContext("/applicationContext.xml");
// UserBo bookDAO = (UserBo) context.getBean("bookDAO");
// Book book = bookDAO.getBook(name); //丟給SERVICE處理
//BookService bookService = new BookServiceImpl(); //用spring注入
Book book = bookService.getBook(name);
if(book==null){
status="query";
clearMessages();
addActionMessage("查詢失敗~~!!!(大驚)");
return "false";
}else{
name = book.getBookName();
price = book.getBookPrice();
return "success";
}
}
}
------------------struts.xml的code-------------------
// ...
// ..
<action name="userAjaxAction"
class="userSpringAction" >
<result name="success">/pages/AjaxTest.jsp</result>
</action>
-----------------AjaxTest.jsp的頁面--------------
<%@ page language="java" contentType="text/html; charset=BIG5"
pageEncoding="BIG5"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
<script type="text/javascript">
window.onload =function(){
setTrStyle();
//Create Row
var btnAdd = document.getElementById("myForm");
btnAdd.onclick = function(){
var txtTd = document.createTextNode("<s:property value="name"/>");
var eleTd = document.createElement("td");
eleTd.appendChild(txtTd); //<td>p</td>
var txtTd1 = document.createTextNode(<s:property value="price"/>);
var eleTd1 = document.createElement("td");
eleTd1.appendChild(txtTd1); //<td>Q</td>
var eleTr = document.createElement("tr");
eleTr.appendChild(eleTd); //<tr><td>P</td></tr>
eleTr.appendChild(eleTd1); //<tr><td>P</td><td>Q</td></tr>
var theTable = document.getElementById("myTable");
theTable.appendChild(eleTr);
setTrStyle();
}
}
function setTrStyle(){
var trs = document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
trs[i].setAttribute("onmouseover","theColor=this.style.backgroundColor;this.style.backgroundColor='yellow'");
trs[i].setAttribute("onmouseout","this.style.backgroundColor=theColor");
if(i % 2 == 0){
trs[i].style.backgroundColor = "pink";
}
}
}
</script>
</head>
<body>
<s:form action="userAjaxAction" id="myForm" >
<s:textfield name="name" label="書名"/>
<s:submit value="查詢"/>
</s:form>
<%-- <input id="buttonRowAdd" type="button" value="create Row" /> --%>
<table id="myTable" border="1" width="50%">
<tr>
<td>書名</td>
<td>價錢</td>
</tr>
<tr>
<td>BookName</td>
<td>Price</td>
</tr>
</table>
</body>
</html>
[最优解释]
你用浏览器访问userAjaxAction这个url后右键点击页面查看源代码看返回什么内容
ajax得到的就是那些内容。
action可以输出json之类的内容，然后客户端eval生成json对象，自己遍历更细一下dom对象就行了
[其他解释]
我現在改成用JSON還是不行
--- action 一部分改成---
////...
////...
return "false";
}else{
JSONArray json = JSONArray.fromObject(book);
System.out.println(json);
result=json.toString();
return SUCCESS;
}
}
----------struts.xml ---------
..........
<action name="userAjaxAction" class="userSpringAction" >
<result type="json">
<param name="root">result</param>
</result>
</action>
-------jsp部分改成---------
<div id="result"></div>
<s:form name="userForm" action="/userAjaxAction.do" method="post">
書名：<input name="book.name"/><br/>
<input id="btn" type="button" value=" 提 交 "/>
</s:form>
<script type="text/javascript">
$(document).ready(function(){
//点击提交按钮时，从服务端获取数据，然后在客户端显示
$("#btn").click(function(){
// 序列化表单的值
var params=$("input").serialize();
$.ajax({
url: "userAjaxAction.do", // 数据发送方式
type: "post", // 接受数据格式
dataType : "json", // 要传递的数据
data : params, // 回调函数，接受服务器端返回给客户端的值，即result值
success : show });
});});
function show(result){
//测试result是否从服务器端返回给客户端 //alert(result);
//解析json对象 var json = eval("("+result+")");
var obj = "書名: "+json.name+" 價錢: "+json.price ; $("#result").html(obj);}
</script>
[其他解释]
确认进入show回调了吗？
$.ajax({
url: "userAjaxAction.do", // 数据发送方式
type: "post", // 接受数据格式
dataType : "json", // 要传递的数据
data : params, // 回调函数，接受服务器端返回给客户端的值，即result值
success : show
,error:function(xhr){alert('出错鸟\n\n'+xhr.responseText)}//////增加error回调看看是不是出错了
});
});});
//解析json对象 var json = eval("("+result+")");
var obj = "書名: "+json.name+" 價錢: "+json.price ; $("#result").html(obj);
alert(obj);
}
</script>
</head>
<body>
<div id="result"></div>
<s:form name="userForm" action="/userAjaxAction.do" method="post">
書名：<input name="name"/><br/>
<input id="btn" type="button" value=" 提 交 "/>
</s:form>
</body>
</html>
---------- struts.xml------------
<struts>
<constant name="struts.devMode" value="true" />
<constant name="struts.action.extension" value="do" />
<package name="default" namespace="/" extends="json-default">
<action name="userAjaxAction" class="userSpringAction" >
<result type="json">
<param name="root">result</param>
</result>
</action>
</struts>
---------------------- action部分程式碼 --------------
....
.....
JSONObject json=JSONObject.fromObject(book);
//输出格式如：{"id":1, "username":"zhangsan", "pwd":"123"}
System.out.println(json);
result=json.toString();
return SUCCESS;
....