在按钮上单击从mysql数据库重新加载php pull而不重新加载页面

时间:2016-01-29 19:46:44

标签: javascript php jquery mysql ajax

我有一个.php页面,我根据cookie值使用PHP显示来自MySQL数据库的表。

在此页面上,如果没有重新加载页面,我可以通过点击按钮更改Cookie数据:

$(document).ready(
function(){
    $(".button").click(function () {
        Cookies.remove('cookie');
        Cookies.set('cookie', 'value', { expires: 7 });

    });

});

如何在相同的点击功能中刷新mysql SELECT,以便表中的数据重新加载而不重新加载页面?

我的php数据已经输入:

<div id="refresh-table"> <?php include 'pull-from.php'; ?> </div>

我已经阅读了所有我必须使用AJAX的地方 - 但我无法根据我所经历过的所有帖子进行设置。我真的很赞赏你的支持。

1 个答案:

答案 0 :(得分:0)

您需要在pull-from.php文件中添加一些代码(或创建另一个使用它来获取数据的文件),这些代码可以接受来自AJAX调用的参数并返回响应,最好是JSON。这基本上就是您的网络服务。

下面是php基本上需要做什么的准系统示例。我包括一个html页面,从Web服务获取数据并显示它。

<?php
$criteria = $_POST['criteria'];

function getData($params) {
    //Call MySQL queries from here, this example returns static data, rows      simulate tabular records.

    $row1 = array('foo', 'bar', 'baz');
    $row2 = array('foo1', 'bar1', 'baz1');
    $row3 = array('foo2', 'bar2', 'baz2');

    if ($params) {//simulate criteria actually selecting data
        $data = array(
            'rows' => array($row1, $row2, $row3)
        );

    }
    else {
        $data = array();
    }

    return $data;
}

$payload = getData($criteria);

header('Content-Type: application/json');//Set header to tell the browser what sort of response is coming back, do not output anything before the header is set.
echo json_encode($payload);//print the response 
?>

HTML

<!DOCTYPE html>
<html>
    <head>
    <title>Sample PHP Web Service</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">   </script>
<script>
    $(document).ready(function(){
        alert("Lets get started, data from the web service should appear below when you close this.");

    $.ajax({
        url: 'web-service.php',
        data: {criteria: 42},//values your api needs to query data
        method: 'POST',
    }).done(function(data){
        console.log(data);//display data in done callback
        $('#content').html(
        JSON.stringify(data.rows)//I just added the raw data
        );
    });

});