更新記錄沒有刷新/離開頁面

我有一個帶有表格的PHP頁面。更新記錄沒有刷新/離開頁面

該表填充了來自MySQL數據庫的記錄。表格（外殼）的一個字段可以包含兩個值：0和1。

當學生是housed字段的值爲1，否則爲0。在我想使用JQUERY UI按鈕帶O表/ I（如開關）。

當單擊該按鈕時，需要在MySQL表中更新該值，並且如果值爲1，那麼圖標("checked")應該顯示在JQUERY UI按鈕的右側，否則該圖標應該消失。

我認爲我需要ajax來做到這一點？
任何人都可以告訴我，如果這可以做或不？也許該怎麼辦？

來源

2012-04-25 geM

這就是Ajax是 – 2012-04-25 14:35:58

[你有什麼嘗試？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/） – Jakub 2012-04-25 14:47:33

是的，這是可以做到

這裏http://openenergymonitor.org/emon/node/107

其中一個例子說

服務器

複製上創建一個名爲api.php PHP腳本並粘貼示例並保存：

<?php 

    //-------------------------------------------------------------------------- 
    // Example php script for fetching data from mysql database 
    //-------------------------------------------------------------------------- 
    $host = "localhost"; 
    $user = "root"; 
    $pass = "root"; 

    $databaseName = "ajax01"; 
    $tableName = "variables"; 

    //-------------------------------------------------------------------------- 
    // 1) Connect to mysql database 
    //-------------------------------------------------------------------------- 
    include 'DB.php'; 
    $con = mysql_connect($host,$user,$pass); 
    $dbs = mysql_select_db($databaseName, $con); 

    //-------------------------------------------------------------------------- 
    // 2) Query database for data 
    //-------------------------------------------------------------------------- 
    $result = mysql_query("SELECT * FROM $tableName");   //query 
    $array = mysql_fetch_row($result);       //fetch result  

    //-------------------------------------------------------------------------- 
    // 3) echo result as json 
    //-------------------------------------------------------------------------- 
    echo json_encode($array); 

?>

然後

在它創建一個名爲client.php與以下內容的相同目錄下的HTML腳本：

<!--------------------------------------------------------------------------- 
Example client script for JQUERY:AJAX -> PHP:MYSQL example 
----------------------------------------------------------------------------> 

<html> 
    <head> 
    <script language="javascript" type="text/javascript" src="jquery.js"></script> 
    </head> 
    <body> 

    <!------------------------------------------------------------------------- 
    1) Create some html content that can be accessed by jquery 
    --------------------------------------------------------------------------> 
    <h2> Client example </h2> 
    <h3>Output: </h3> 
    <div id="output">this element will be accessed by jquery and this text replaced</div> 

    <script id="source" language="javascript" type="text/javascript"> 

    $(function() 
    { 
    //----------------------------------------------------------------------- 
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/ 
    //----------------------------------------------------------------------- 
    $.ajax({          
     url: 'api.php',     //the script to call to get data   
     data: "",      //you can insert url argumnets here to pass to api.php 
             //for example "id=5&parent=6" 
     dataType: 'json',    //data format  
     success: function(data)   //on recieve of reply 
     { 
     var id = data[0];    //get id 
     var vname = data[1];   //get name 
     //-------------------------------------------------------------------- 
     // 3) Update html content 
     //-------------------------------------------------------------------- 
     $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html 
     //recommend reading up on jquery selectors they are awesome 
     // http://api.jquery.com/category/selectors/ 
     } 
    }); 
    }); 

    </script> 
    </body> 
</html>

來源

2012-04-25 14:37:28

更新記錄沒有刷新/離開頁面

回答

相關問題