JSF頁面中使用js函數回調後臺bean方法並獲取返回值的方法

因爲primefaces在國內使用的並非太多，所以，國內對jsf作系統、詳細的介紹的資料不多，即便有一些資料，也僅僅是對國外資料的簡單翻譯或者是僅僅講表面現象（皮毛而已），它們的語句甚至仍是錯誤的，極可能會誤導使用者。

相對來講，看國內的那些僅僅是翻譯過來的文章或書籍不如直接看國外的官方文檔或資料來的實在，在我講述jsf頁面中如何使用js調用後臺bean方法以前，先給你們說幾個國外的資料。在primefaces官方網站上，你能夠搜索到幾乎全部你須要的東西，primefaces官網爲：http://www.primefaces.org/showcase/index.xhtml 如過以爲本身英語很差的童鞋，能夠前往primefaces國內鏡像網站查閱資料： http://www.primefaces.cn/ ，只是國內的這個網站正在翻譯中，有些東西還不完善；若是有想細緻的瞭解primefaces的朋友，還能夠下載primefaces的官方文檔，最新的官方文檔爲5.2，全英文，我在這裏給你們提供我下載好的primefaces官方文檔：http://pan.baidu.com/s/1mg3i9Ry ,在這個文檔裏你能夠經過他們的示例來組合出來不少有趣的東西。另外我在淘寶上發現了Primefaces官方的JSF框架，官方售價300RMB,淘寶售價才五元，你們能夠前去學習：https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-12555052969.2.nPXnNz&id=523880497056

好，接下來進入正文。

某些狀況下，在開發jsf項目時，咱們須要必須使用html組件來達到一些使用Jsf組件不能達到的目標。例若有時候咱們但願，當觸發某些html組件或標籤時，觸發後臺方法甚至接收後臺方法傳過來的返回值。這回讓咱們很頭疼，由於primefaces並無給咱們說如何使用js來調用後臺bean方法。那麼，咱們就須要結合js和jsf同時才能夠達到這個目的。

達到這個目的又兩個方法。

1 使用jsf的inputHidden標籤

這幾乎算不上真正的js調用後臺的方法，由於它沒法向後擡bean傳遞值，可是簡單的後臺向頁面傳遞數據可使用這個方法

<h:inputHidden id="input" value="#{advancedQueryManager.aliaColums}"></h:inputHidden>

首先，在jsf中觸發某個組件時，要及時update這個inputHidden標籤，例以下面的組件

<p:selectOneMenu id="module"
	value="#{advancedQueryManager.selectedModule}">
	<f:selectItem itemLabel="----" itemValue="" />
	<f:selectItems value="#{advancedQueryManager.allModule}" />
	<p:ajax event="change" update="input"
		oncomplete="getVlue()"
		listener="#{advancedQueryManager.onModuleChange()}"></p:ajax>
</p:selectOneMenu>

這裏面的組件就會當這個下拉值變化時，就會觸發後臺的方法

onModuleChange()

當，方法結束後，它會update（刷新）這個

h:inputHidden

若是你的這個inputHidden中的值是隨下拉的變化和變化的呢，那麼，你就能夠在任何的js函數中獲取到這個inputHidden中的值，而後進行處理，

function getVlue() {
	/* document.getElementById("commBtn").onclick; */
	alert("a");
	var aliaColums = document.getElementById("input").value;
	dataJson = eval("(" + aliaColums + ")");
		addqueryroot('.query', true);
}

我這裏的inputHidden 盛的是一個json格式的字符串，我經過js函數就能夠動態的獲取這個json，進而進行其餘的操做。固然，能夠在任何html標籤中調用這個js函數，而後獲取這個json字符串。

2 使用commandButton來達到複雜的異步刷新取值

在這裏說下，普通的html標籤結合js函數結合commandButton能夠達到什麼效果呢？那就是在你觸發任何html標籤時，你均可以經過這個commandButton組件來將你在html標籤中選定的值傳遞到後臺，通過後臺bean處理後，它會返回處理結果，js函數就能夠接收到這個處理結果，而後再將這個結果整合到其餘的組件中。

首先，建立這個隱藏的commandButton,注意，這個commandButton自己不具備隱藏的屬性，能夠經過其餘有隱藏屬性的組件將其包裹，以達到隱藏的目的，我經過一個div來達到這個目的。在這個commandButton中，咱們發現，action的做用就是當點擊這個commandButton時，它會調用後臺方法，而attribute中的name 屬性和value屬性的做用會在下面將。

<div id="hiddenForm" style="display: none;">
	<p:commandButton id="command"
		actionListener="#{advancedQueryManager.testReturn}"
		oncomplete="handleComplete(xhr, status, args)">
		<f:attribute name="attrname1" value="liu" />
		<f:attribute name="attrname2" value="bei" />
	</p:commandButton>
</div>

而後咱們須要一個普通的html標籤，就以一個普通的html  button爲例：

<input type="button" value="回調測試" onclick="test()" />

而後寫一個js函數，來鏈接這個普通的button和jsf組件commandButton

function test() {
	$('#command').click();
}

這個函數的意思就是，當你點擊這個"回調測試"的按鈕時，它就至關於觸發了jsf的cimmandButton按鈕，這時，commandButton中的兩個

<f:attribute name="attrname1" value="liu" />

中的兩個屬性就會自動綁定成一個相似於map形式的數據，name屬性的值做爲key，value中的值做爲map中的value，它們將會被傳遞至後臺。

而後，後臺的bean 中須要有方法來接收兩個值：

public void testReturn(ActionEvent event) {
	String attrvalue1 = (String) event.getComponent().getAttributes()
		.get("attrname1");
	String attrvalue2 = (String) event.getComponent().getAttributes()
		.get("attrname2");
	System.out.println(attrvalue1);
	System.out.println(attrvalue2);
	RequestContext requestContext = RequestContext.getCurrentInstance();
	requestContext.addCallbackParam("isValid", true);

}

在上面的代碼中，咱們能夠看到，java程序已經成功的接收前端頁面傳過來的值，它最後也返回了一個類是於map格式的值，key爲：isValid，value 爲：true

最後，咱們要寫一下頁面如何接收後臺傳遞過來的值：

<script type="text/javascript">
	function handleComplete(xhr, status, args) {
		var isValid = args.isValid;
		alert(isValid);
	}
</script>

接下來，就會發現不只僅後臺能夠正常打印出前端頁面中的那兩個值，同時前端的js函數也能夠打印出後臺傳過來的值，固然，一樣的，從前端傳遞到後臺的值的個數和形式，你能夠本身改，同時從後臺接收到的數據，你也能夠隨意的進行任何操做。

可是請注意，這個

p:commandButton

組件有個問題，就是你不能夠動態的經過js函數來將一些值賦給這個組件，可是這個組件裏的值能夠接受後臺的屬性值

<f:attribute name="attrname1" value="#{bean.val}" />

這樣其實也並無達到咱們想要經過js來傳給後臺bean的目的，接下來的方法，就能夠徹底達到經過js動態的傳值給後臺bean方法，bean方法處理完返回數據給js。

3 使用p:remoteCommand來達到複雜的異步刷新取值

你們請注意，這個方法能夠真正的解決在jsf中經過js調用後臺bean方法並獲取bean方法返回值的問題。

一樣，首先咱們要寫兩個jsf組件，來和後臺bean結合

<h:inputHidden id="input1" value="#{advancedQueryManager.vals}"></h:inputHidden>
<h:form>
	<p:remoteCommand name="processSelection"
		action="#{advancedQueryManager.testReturn}" update=":input1"
		oncomplete="processResult();" />
</h:form>

解釋一下，上面的的這個inputHidden的做用是接收後臺bean處理後的返回值。remoteCommand的做用是將js中的動態的值傳遞到後臺bean方法。

<script>
	function processResult() {
		//接收後臺bean方法中傳遞過來的處理結果，接收方法是獲取inputHidden中的值，並可根據本身的業務繼續處理
		alert($('#input1').val());
	}

	function makeSelection() {
	        //普通的html組件調用這個js
		//將想要傳遞到後臺的動態值封裝成json格式的值，傳給p:remoteCommand,而後由這個組件傳給bean方法
		processSelection([ {name : 'setVal',value : 'getIt'} ]);
	}
/script>

js函數使用方法在代碼中，誰不懂能夠再艾特我，這裏再也不解釋。

最後是後臺bean方法代碼：

public void testReturn() {
		String selectedValue = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("setVal");
		System.out.println("------>"+selectedValue);
		   //攔截到這個頁面傳過來的值後能夠進行你本身的業務處理
		   //並將處理結果返回給vals，這個vals是這個bean中的一個屬性
		   vals = "getResult";

}

至此，jsf中使用js函數將普通的html組件的值動態的傳遞到後臺bean方法並接受後臺處理結果已經成功獲得解決。