更新记录而不刷新/离开页面

Question

I've a PHP-page with a table in it. 我有一个PHP页面，里面有一个表。

The table is populated with records from a MySQL-database. 该表中填充了MySQL数据库中的记录。 One field of a table (housing) can contain two values: 0 and 1 . 表（外壳）的一个字段可以包含两个值： 0和1 。

When a student is housed the value of the field is 1 otherwise 0. In the table I want to use a JQUERY UI-button with O/I (like a switch). 当housed一个学生时，该字段的值为1，否则为0。在表中，我想使用带有O / I的JQUERY UI按钮 （如开关）。

When the button is clicked, the value needs to be updated in the MySQL-table and there should an icon ("checked") be shown right to the JQUERY UI-button, if the value is 1 else the icon should disappear. 单击该按钮时，需要在MySQL表中更新该值，并且应该在JQUERY UI按钮的右侧显示一个图标("checked") ，如果该值为1，则该图标应消失。

I assume I need ajax to do this? 我认为我需要用ajax来做到这一点？
Can anyone tell me if this can be done or not? 谁能告诉我是否可以这样做？ And perhaps how it can be done? 也许怎么做？

Answer 1

Yes it can be done 是的，可以做到

an example here http://openenergymonitor.org/emon/node/107 此处为示例http://openenergymonitor.org/emon/node/107

which says 这说

Create a php script called api.php on your server 在服务器上创建一个名为api.php的php脚本

Copy and paste the example below and save it: 复制并粘贴以下示例并保存：

<?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);

?>

then 然后

Create a html script called client.php in the same directory with the following content in it: 在同一目录中创建一个名为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>

更新记录而不刷新/离开页面

问题描述

1 个解决方案

解决方案1
4 2012-04-25 14:37:28

更新记录而不刷新/离开页面

问题描述

1 个解决方案

解决方案1 4 2012-04-25 14:37:28

解决方案1
4 2012-04-25 14:37:28