更新记录没有刷新/离开页面

我有一个带有表格的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

更新记录没有刷新/离开页面

回答

相关问题