使用AJAX在PHP文件中调用PHP方法

时间:2016-03-18 17:35:08

标签: javascript php ajax

现在我有一种动态形式的排序,允许用户选择类别,类型和子类型。然后,此信息将用于PHP函数(希望如此)。所有这些都在PHP文件中。

我希望使用AJAX来调用该PHP文件中的函数。我已经看到了在HTML文档中使用AJAX调用PHP文件的方法,但不是从PHP文档中调用。

这是我configs.php的相关部分:

<?php
use FW\Config;
require_once 'setup.php';

function build($category, $type, $subtype){
   //WANT TO GET HERE
}

function getTypes($dir) {
    return array_diff(scandir($dir), array('..', '.'));
}

function getSubTypes($dir, $type) {
    return array_diff(scandir("$dir//$type"), array('..', '.'));
}

function getVersions($dir, $type, $subType) {
    return array_diff(scandir("$dir//$type//$subType"), array('..', '.'));
}

function getFileContents($dir, $type, $subtype, $file){
    $path = "$dir/$type/$subtype/$file.txt"; 
    $openFile = fopen($path, "r"); 
    $content = fread($openFile, filesize($path)); 
    fclose($openFile);
    return split("/", $content)[0];
}

$project_dir = Config::$appConfig['project_file_dir']['scriptPath'];
$workflow_dir = Config::$appConfig['workflow_file_dir']['scriptPath'];

$project_types = getTypes($project_dir);
$project_subtypes = array();
$project_versions = array();

$workflow_types = getTypes($workflow_dir);
$workflow_subtypes = array();
$workflow_versions = array();

foreach ($project_types as $type) {
    $project_subtypes[$type] = getSubTypes($project_dir, $type);

    //@todo remove once folder structure is all setup
    if ($type !== 'CD') continue;

    foreach ($project_subtypes[$type] as $subType) {
        $project_versions[$subType] = getVersions($project_dir, $type, $subType);
    }
}

foreach ($workflow_types as $type) {
    $workflow_subtypes[$type] = getSubTypes($workflow_dir, $type);

    foreach ($workflow_subtypes[$type] as $subType) {
        $workflow_versions[$subType] = getVersions($workflow_dir, $type, $subType);
    }
}

function makeInfoSection($type, $subType, $versions, $dir) {    

    // list versions
    $html .= '<h4>Available Versions</h4>';
    $html .= '<ul class="list-group">';
    foreach ($versions as $v) {
        if (strpos($v, '.txt')) continue;

        $html .= '<li class="list-group-item">';
        $html .= '<span class="badge"><a href="#" style="color:orange">';
        $html .= '<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"';
        $html .= 'onclick="build()">'; //@todo add onclick to trigger build()
        $html .= '</span></a></span>';
        $html .= $v;
        $html .= '</li>';
    }
    $html .= '</ul>';

    return $html;
}

function makeSection($parent, $prefix, $type, $subTypes) {
    $headingID = 'heading-'.$type;
    $bodyID = 'collapse-'.$prefix.$type;

    $html = '<div class="panel panel-default" style="margin-bottom:10px;">';
    $html .= '<div class="panel-heading" role="tab" id="'.$headingID.'">';
    $html .= '<h4 class="panel-title">';
    $html .= '<a role="button" data-toggle="collapse" data-parent="'.$parent;
    $html .= '" href="#'.$bodyID.'" aria-expanded="true"';
    $html .= 'aria-controls="'.$bodyID.'">'.$type;
    $html .= '</a></h4></div>';

    $html .= '<div id="'.$bodyID.'" class="panel-collapse collapse in" ';
    $html .= 'role="tabpanel" aria-labelledby="'.$headingID.'">';

    $html .= '<div class="list-group">';
    foreach ($subTypes as $subType) {
        $target = "tab-".$prefix.$type."-".$subType;
        $html .= '<a href="#'.$target.'" class="list-group-item" ';
        $html .= 'aria-controls="'.$target.'" role="tab" data-toggle="tab"';
        $html .= '>'.$subType.'</a>';
    }

    $html .= '</div></div></div>';
    return $html;
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.list-group-item.active, .list-group-item.active:hover {
    background-color: white;
    color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
    <h1>Configuration Management</h1>
</div>

<div class="row">
    <div class="col-md-5 col-md-push-1 col-sm-6">
        <ul class="nav nav-tabs" role="tablist" id="config-tabs">
            <li role="presentation" class="active">
                <a href="#project_list" aria-controls="project_list" role="tab" data-toggle="tab">
                    <h4>Project</h4>
                </a>
            </li>
            <li role="presentation">
                <a href="#workflow_list" aria-controls="workflow_list" role="tab" data-toggle="workflow_list">
                    <h4>Workflow</h4>
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active panel-group" id="project_list" role="tablist" aria-multiselectable="true">
                <?php
                    foreach ($project_types as $type) {
                        echo makeSection( '#project_list', 'project-',$type, $project_subtypes[$type]);
                    }
                ?>
            </div>
            <div role="tabpanel" class="tab-pane panel-group" id="workflow_list" role="tablist" aria-multiselectable="true">
                <?php
                    foreach ($workflow_types as $type) {
                        echo makeSection( '#workflow_list', 'workflow-',$type, $workflow_subtypes[$type]);
                    }
                ?>
            </div>
        </div>
    </div>
    <div class="col-md-5 col-md-push-1 col-sm-6">
        <div id="tabs" class="tab-content" style="padding:0em 0em 0em 1em">
            <?php
                foreach ($project_types as $type) {
                    // @TODO remove once folder structure is all setup
                    if ($type !== 'CD') continue;

                    foreach ($project_subtypes[$type] as $subType) {
                        $html = "<div role ='tabpanel' class='tab-pane'";
                        $html .= "id='tab-project-".$type."-".$subType."'>";
                        $html .= makeInfoSection($type, $subType, $project_versions[$subType], $project_dir);
                        $html .= "</div>";
                        echo $html;
                    }
                }

                foreach ($workflow_types as $type) {
                    foreach ($workflow_subtypes[$type] as $subType) {
                        $html = "<div role ='tabpanel' class='tab-pane'";
                        $html .= "id='tab-workflow-".$type."-".$subType."'>";
                        $html .= makeInfoSection($type, $subType, $workflow_versions[$subType], $workflow_dir);
                        $html .= "</div>";
                        echo $html;
                    }
                }
            ?>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="12345" crossorigin="anonymous"></script>
<script type="text/javascript">
    function build (url, params, cb) { 
        url += "/buildWithParameters";

        $.ajax({
            type: 'POST',
            url: url,
            data: params,
            success: cb
        });
    };

    $('.collapse').collapse();

    $('.list-group a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    $('#config-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
</script>
</body>
</html>

在上面的代码中,我想调用PHP函数build。我有一个JavaScript函数build(),它在适当的时候被调用,并且应该有AJAX来进行调用。我该怎么做?我怎么通过params?

3 个答案:

答案 0 :(得分:1)

为什么不只是为AJAX例程调用一个单独的文件?

无论如何,要回答你的问题:

AJAX将通过GET或POST将数据字符串发送到您的PHP文件。标准化一个 - 很多人喜欢发帖。

如您所知,AJAX代码块看起来像这样(您需要发送函数所需的信息):

var var_value = $('#my_element').val();
var cat = $('#category_element').val();
var typ = $('#type_element').val();
var sub = $('#subtype_element').val();
$.ajax({
    type: 'post',
     url: 'your_file.php',
    data: 'var_name=' +var_value+ '&cat=' +cat+ '&typ=' +typ+ '&sub=' +sub,
    success: function(d){
        if (d.length) alert(d); //for testing - alerts anything your function ECHOs
    }
});//end ajax

在PHP文件中,只捕获var:

<?php
    //Your existing PHP file contents go here. At bottom add:

    if ( isset($_POST('var_name') ){
        $category = $_POST('cat');
        $type = $_POST('typ');
        $subtype = $_POST('sub');
        build($category, $type, $subtype);
    }

See this post了解一些有用的AJAX技巧和简单示例

答案 1 :(得分:0)

试试这个:

<?php
use FW\Config;
require_once 'setup.php';

//Check the get variable for the function being called.
if(isset($_GET['func']) AND function_exists($_GET['func'])){
  $func=$_GET['func'];
  $func();
  //This is an ajax call, we really should exit here so we can let $func handle the ajax output;
   exit;
}
function build($category, $type, $subtype){
   //WANT TO GET HERE
}

function getTypes($dir) {
    return array_diff(scandir($dir), array('..', '.'));
}

function getSubTypes($dir, $type) {
    return array_diff(scandir("$dir//$type"), array('..', '.'));
}

function getVersions($dir, $type, $subType) {
    return array_diff(scandir("$dir//$type//$subType"), array('..', '.'));
}

function getFileContents($dir, $type, $subtype, $file){
    $path = "$dir/$type/$subtype/$file.txt"; 
    $openFile = fopen($path, "r"); 
    $content = fread($openFile, filesize($path)); 
    fclose($openFile);
    return split("/", $content)[0];
}

$project_dir = Config::$appConfig['project_file_dir']['scriptPath'];
$workflow_dir = Config::$appConfig['workflow_file_dir']['scriptPath'];

$project_types = getTypes($project_dir);
$project_subtypes = array();
$project_versions = array();

$workflow_types = getTypes($workflow_dir);
$workflow_subtypes = array();
$workflow_versions = array();

foreach ($project_types as $type) {
    $project_subtypes[$type] = getSubTypes($project_dir, $type);

    //@todo remove once folder structure is all setup
    if ($type !== 'CD') continue;

    foreach ($project_subtypes[$type] as $subType) {
        $project_versions[$subType] = getVersions($project_dir, $type, $subType);
    }
}

foreach ($workflow_types as $type) {
    $workflow_subtypes[$type] = getSubTypes($workflow_dir, $type);

    foreach ($workflow_subtypes[$type] as $subType) {
        $workflow_versions[$subType] = getVersions($workflow_dir, $type, $subType);
    }
}

function makeInfoSection($type, $subType, $versions, $dir) {    

    // list versions
    $html .= '<h4>Available Versions</h4>';
    $html .= '<ul class="list-group">';
    foreach ($versions as $v) {
        if (strpos($v, '.txt')) continue;

        $html .= '<li class="list-group-item">';
        $html .= '<span class="badge"><a href="#" style="color:orange">';
        $html .= '<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"';
        $html .= 'onclick="build()">'; //@todo add onclick to trigger build()
        $html .= '</span></a></span>';
        $html .= $v;
        $html .= '</li>';
    }
    $html .= '</ul>';

    return $html;
}

function makeSection($parent, $prefix, $type, $subTypes) {
    $headingID = 'heading-'.$type;
    $bodyID = 'collapse-'.$prefix.$type;

    $html = '<div class="panel panel-default" style="margin-bottom:10px;">';
    $html .= '<div class="panel-heading" role="tab" id="'.$headingID.'">';
    $html .= '<h4 class="panel-title">';
    $html .= '<a role="button" data-toggle="collapse" data-parent="'.$parent;
    $html .= '" href="#'.$bodyID.'" aria-expanded="true"';
    $html .= 'aria-controls="'.$bodyID.'">'.$type;
    $html .= '</a></h4></div>';

    $html .= '<div id="'.$bodyID.'" class="panel-collapse collapse in" ';
    $html .= 'role="tabpanel" aria-labelledby="'.$headingID.'">';

    $html .= '<div class="list-group">';
    foreach ($subTypes as $subType) {
        $target = "tab-".$prefix.$type."-".$subType;
        $html .= '<a href="#'.$target.'" class="list-group-item" ';
        $html .= 'aria-controls="'.$target.'" role="tab" data-toggle="tab"';
        $html .= '>'.$subType.'</a>';
    }

    $html .= '</div></div></div>';
    return $html;
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.list-group-item.active, .list-group-item.active:hover {
    background-color: white;
    color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
    <h1>Configuration Management</h1>
</div>

<div class="row">
    <div class="col-md-5 col-md-push-1 col-sm-6">
        <ul class="nav nav-tabs" role="tablist" id="config-tabs">
            <li role="presentation" class="active">
                <a href="#project_list" aria-controls="project_list" role="tab" data-toggle="tab">
                    <h4>Project</h4>
                </a>
            </li>
            <li role="presentation">
                <a href="#workflow_list" aria-controls="workflow_list" role="tab" data-toggle="workflow_list">
                    <h4>Workflow</h4>
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active panel-group" id="project_list" role="tablist" aria-multiselectable="true">
                <?php
                    foreach ($project_types as $type) {
                        echo makeSection( '#project_list', 'project-',$type, $project_subtypes[$type]);
                    }
                ?>
            </div>
            <div role="tabpanel" class="tab-pane panel-group" id="workflow_list" role="tablist" aria-multiselectable="true">
                <?php
                    foreach ($workflow_types as $type) {
                        echo makeSection( '#workflow_list', 'workflow-',$type, $workflow_subtypes[$type]);
                    }
                ?>
            </div>
        </div>
    </div>
    <div class="col-md-5 col-md-push-1 col-sm-6">
        <div id="tabs" class="tab-content" style="padding:0em 0em 0em 1em">
            <?php
                foreach ($project_types as $type) {
                    // @TODO remove once folder structure is all setup
                    if ($type !== 'CD') continue;

                    foreach ($project_subtypes[$type] as $subType) {
                        $html = "<div role ='tabpanel' class='tab-pane'";
                        $html .= "id='tab-project-".$type."-".$subType."'>";
                        $html .= makeInfoSection($type, $subType, $project_versions[$subType], $project_dir);
                        $html .= "</div>";
                        echo $html;
                    }
                }

                foreach ($workflow_types as $type) {
                    foreach ($workflow_subtypes[$type] as $subType) {
                        $html = "<div role ='tabpanel' class='tab-pane'";
                        $html .= "id='tab-workflow-".$type."-".$subType."'>";
                        $html .= makeInfoSection($type, $subType, $workflow_versions[$subType], $workflow_dir);
                        $html .= "</div>";
                        echo $html;
                    }
                }
            ?>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="12345" crossorigin="anonymous"></script>
<script type="text/javascript">
    function build (url, params, cb) { 

        url += "/buildWithParameters";
        //Added so we set the $_GET['func']
        url += "?func=build";

        $.ajax({
            type: 'POST',
            url: url,
            data: params,
            success: cb
        });
    };

    $('.collapse').collapse();

    $('.list-group a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    $('#config-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
</script>
</body>
</html>

我只更改了代码的两个部分。

位于需要setup.php的正下方,就在您的Javascript构建函数内部。

如果你需要传递参数,你当前对build的调用是空的,你正在调用build(),但是build需要3个参数。

因此,如果url为空(或在此情况下未定义),您可能会发现该URL未到达正确的位置。参数既空也有空。因此,可能需要使用

在函数内部检查所有这些内容
if(typeof VARIABLE == "undefined" ) VARIABLE="SOMETHING"; //populate, you can also call a function here to get data.

答案 2 :(得分:-1)

在php标记启动后放在代码下面。

// check if ajax call
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{    
    // call your php function here and return some data
    $data = someFunction();
    echo json_encode($data);    // return data back in json format, can return in other format as well.
    exit();    // do use exit here otherwise it will return the whole file code 
}