2009-01-02 61 views
10

如何通過JavaScript腳本請求PHP頁面並將數據傳遞給它?那麼我該如何讓PHP腳本將數據傳回給JavaScript腳本呢?如何將數據從Javascript傳遞到PHP,反之亦然?

client.js:

data = {tohex: 4919, sum: [1, 3, 5]}; 
// how would this script pass data to server.php and access the response? 

server.php:

$tohex = ... ; // How would this be set to data.tohex? 
$sum = ...; // How would this be set to data.sum? 
// How would this be sent to client.js? 
array(base_convert($tohex, 16), array_sum($sum)) 

回答

17

從PHP傳遞數據很容易,你可以生成JavaScript與它。另一種方式有點困難 - 您必須通過Javascript請求調用PHP腳本。

一個例子(使用爲了簡化傳統事件註冊模型):

<!-- headers etc. omitted --> 
<script> 
function callPHP(params) { 
    var httpc = new XMLHttpRequest(); // simplified for clarity 
    var url = "get_data.php"; 
    httpc.open("POST", url, true); // sending as POST 

    httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    httpc.setRequestHeader("Content-Length", params.length); // POST request MUST have a Content-Length header (as per HTTP/1.1) 

    httpc.onreadystatechange = function() { //Call a function when the state changes. 
    if(httpc.readyState == 4 && httpc.status == 200) { // complete and no errors 
     alert(httpc.responseText); // some processing here, or whatever you want to do with the response 
     } 
    } 
    httpc.send(params); 
} 
</script> 
<a href="#" onclick="callPHP('lorem=ipsum&foo=bar')">call PHP script</a> 
<!-- rest of document omitted --> 

無論get_data.php產生,將顯示在httpc.responseText。錯誤處理,事件註冊和跨瀏覽器XMLHttpRequest兼容性留給讀者簡單的練習;)

+2

值得注意的是,它僅適用於相對URL,因爲同源策略:http://en.wikipedia.org/wiki/Same-origin_policy – 2014-10-15 14:03:19

2

我想你或多或少剛纔描述Ajax

(遺憾的簡短回覆)

1

可以從PHP數據傳遞到JavaScript,但只有這樣,才能從JavaScript獲取數據到PHP是通過AJAX。

原因是你可以通過PHP建立一個有效的javascript,但爲了獲得數據到PHP你將需要讓PHP再次運行,並且由於PHP只運行來處理輸出,你將需要一個頁面重新加載或一個異步查詢。

+0

這是不正確的,正如我剛纔所顯示的那樣,我使用表單提交方法在工作中每天幾乎從JavaScript獲取數據到服務器端。 – Kezzer 2009-01-02 09:59:54

+0

使用頁面重新加載或異步查詢? – 2009-01-02 11:32:50

2

有幾種方法,最突出的是獲取表單數據或獲取查詢字符串。這裏有一個使用JavaScript的方法。當你點擊一個鏈接時,它會調用_vals('mytarget','theval'),它將提交表單數據。當您的頁面發回時,您可以檢查此表單數據是否已設置,然後從表單值中檢索。

<script language="javascript" type="text/javascript"> 
function _vals(target, value){ 
    form1.all("target").value=target; 
    form1.all("value").value=value; 
    form1.submit(); 
} 
</script> 

或者,您可以通過查詢字符串獲取它。 PHP有你的_GET和_SET全局函數來實現這一點,使它更容易。

我敢肯定,可能有更多的方法更好,但這些只是幾個想到的問題。

編輯:大廈這從別人怎麼用上面的方法說你有一個像

<a onclick="_vals('name', 'val')" href="#">My Link</a> 
使用

然後在你的PHP,你可以得到表單數據一個錨標記

$val = $_POST['value']; 

所以,當你點擊使用JavaScript的鏈接時,它會發布表單數據,當頁面從這個點擊返回時,你可以從PHP中檢索它。

7

我會使用JSON作爲格式和Ajax(真正XMLHttpRequest)作爲客戶端 - >服務器機制。

0

其他的方式來交換從PHP數據到JavaScript或反之亦然通過使用Cookie,你可以保存在PHP中的cookies和你的JavaScript讀,爲此,你不必使用形式或阿賈克斯

2

使用cookie是一種簡單的方法。你可以使用jQuery和一個插件jquery.cookie或創建自己的。 使用jQuery + jquery.cookie,通過例如

<script> 
    var php_value = '<?php echo $php_variable; ?>'; 

    var infobar_active = $.cookie('php_value'); 
    var infobar_alert = any_process(infobar_active); 

    //set a cookie to readit via php 
    $.cookie('infobar_alerta', infobar_alerta); 

    </script> 

    <?php 

    var js_value = code to read a cookie 

    ?> 

我發現這個有用的服務器端和混合框架: http://www.phplivex.com/ http://www.ashleyit.com/rs/

我用阿什利RSJS腳本以更新值一直HTML很長時間沒有任何問題,直到我遇到了jQuery(ajax,load等)

7

我前幾天碰到類似的問題。比方說,我想將數據從客戶端傳遞到服務器,並將數據寫入日誌文件。這裏是我的解決方案:

我簡單的客戶端代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <title>Test Page</title> 
    <script> 
    function passVal(){ 
     var data = { 
      fn: "filename", 
      str: "this_is_a_dummy_test_string" 
     }; 

     $.post("test.php", data); 
    } 
    passVal(); 
    </script> 

</head> 
<body> 
</body> 
</html> 

和PHP代碼在服務器端:

<?php 
    $fn = $_POST['fn']; 
    $str = $_POST['str']; 
    $file = fopen("/opt/lampp/htdocs/passVal/".$fn.".record","w"); 
    echo fwrite($file,$str); 
    fclose($file); 
?> 

希望這對你的作品和未來的讀者!

相關問題