如何将php文件包含到我的html文件中?

时间:2015-02-24 11:00:20

标签: javascript php jquery html

这是我的index.php:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Voting Page</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    //####### on page load, retrive votes for each content
    $.each( $('.voting_wrapper'), function(){

        //retrive unique id from this voting_wrapper element
        var unique_id = $(this).attr("id");

        //prepare post content
        post_data = {'unique_id':unique_id, 'vote':'fetch'};

        //send our data to "vote_process.php" using jQuery $.post()
        $.post('vote_process.php', post_data,  function(response) {

                //retrive votes from server, replace each vote count text
                $('#'+unique_id+' .up_votes').text(response.vote_up +' user has voted'); 
            },'json');
    });



    //####### on button click, get user vote and send it to vote_process.php using jQuery $.post().
    $(".voting_wrapper .voting_btn").click(function (e) {

        //get class name (down_button / up_button) of clicked element
        var clicked_button = $(this).children().attr('class');

        //get unique ID from voted parent element
        var unique_id   = $(this).parent().attr("id"); 


        if(clicked_button==='up_button') //user liked the content
        {
            //prepare post content
            post_data = {'unique_id':unique_id, 'vote':'up'};

            //send our data to "vote_process.php" using jQuery $.post()
            $.post('vote_process.php', post_data, function(data) {

                //replace vote up count text with new values

                $('#'+unique_id+' .up_votes').text(data);
                //thank user for liking the content
dataModified = data+' users has voting including you';
$('#message-status').hide().html(dataModified).fadeIn('slow').delay(5000).hide(1);
            }).fail(function(err) { 

            //alert user about the HTTP server error
            alert(err.statusText); 
            });
        }

    });
    //end 

});

</script>
<style type="text/css">
<!--
.content_wrapper{width:500px;margin-right:auto;margin-left:auto;}
h3{color: #979797;border-bottom: 1px dotted #DDD;font-family: "Trebuchet MS";}

/*voting style */
.voting_wrapper {display:inline-block;margin-left: 20px;}
.voting_wrapper .up_button {background: url(images/index.png) no-repeat;float: left;width: 50px;cursor:pointer;}
.voting_wrapper .up_button:hover{background: url(images/index.png) no-repeat;}
.voting_btn{float:left;margin-right:5px;}
.voting_btn span{font-size: 11px;float: left;margin-left: 3px;}

-->
</style>
</head>

<body>
<div class="content_wrapper">
    <h3><img src="9780143332497.jpg" alt=""><br />

        <!-- voting markup -->
        <div class="voting_wrapper" id="1001">
            <div class="voting_btn">
                <div class="up_button">&nbsp;</div><span class="up_votes"></span>
            </div>
        </div>
        <!-- voting markup end -->
    </h3>
<span id="message-status"></span>
</div>
</body></html>

和vote_process.php:

<?php
    ####### db config ##########
    $db_username = 'root';
    $db_password = '';
    $db_name = 'voter';
    $db_host = 'localhost';
    ####### db config end ##########

if($_POST)
{

    ### connect to mySql
    $sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');

    //get type of vote from client
    $user_vote_type = trim($_POST["vote"]);

    //get unique content ID and sanitize it (cos we never know).
    $unique_content_id = filter_var(trim($_POST["unique_id"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);

    //Convert content ID to MD5 hash (optional)
    $unique_content_id = hash('md5', $unique_content_id);

    //check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
        die();
    } 


    switch ($user_vote_type)
    {           

        ##### User liked the content #########
        case 'up': 

            //check if user has already voted, determined by unique content cookie
            if (isset($_COOKIE["voted_".$unique_content_id]))
            {
                header('HTTP/1.1 500 User Already Voted'); //cookie found, user has already voted
                exit(); //exit script
            }

            //get vote_up value from db using unique_content_id
            $result = mysqli_query($sql_con,"SELECT vote_up FROM voting_count WHERE unique_content_id='$unique_content_id' LIMIT 1");
            $get_total_rows = mysqli_fetch_assoc($result);

            if($get_total_rows)
            {
                //found record, update vote_up the value
                mysqli_query($sql_con,"UPDATE voting_count SET vote_up=vote_up+1 WHERE unique_content_id='$unique_content_id'");
            }else{
                //no record found, insert new record in db
                mysqli_query($sql_con,"INSERT INTO voting_count (unique_content_id, vote_up) value('$unique_content_id',1)");
            }

            setcookie("voted_".$unique_content_id, 1, time()+7200); // set cookie that expires in 2 hour "time()+7200".
            echo ($get_total_rows["vote_up"]+1); //display total liked votes
            break;  

        ##### respond votes for each content #########      
        case 'fetch':
            //get vote_up and vote_down value from db using unique_content_id
            $result = mysqli_query($sql_con,"SELECT vote_up,vote_down FROM voting_count WHERE unique_content_id='$unique_content_id' LIMIT 1");
            $row = mysqli_fetch_assoc($result);

            //making sure value is not empty.
            $vote_up    = ($row["vote_up"])?$row["vote_up"]:0; 

            //build array for php json
            $send_response = array('vote_up'=>$vote_up, 'vote_down'=>$vote_down);
        echo json_encode($send_response);
            break;

    }

}
?>

这是我的html现有工作jsfiddle:http://jsfiddle.net/grkzcc5u/

我已经在php [index.php和vote_process.php]创建了投票系统,所以

我需要将上面两个php文件添加到我的索引html文件中。

对我来说,这是新的想法,我对这个问题一无所知。

任何人都可以帮我解决这个问题吗?

3 个答案:

答案 0 :(得分:1)

您可以通过将CSS存储在外部文件中,然后将其添加到页面顶部的标记和开始标记之间来清理HTML文件:

<link href="/path/to/stylesheet.css" type="">

然后将您的脚本存储在外部文件中,并将其链接到页面底部,标签上方,如下所示:

<script src="path/to/external/file"></script>

然后将您的HTML文件扩展名更改为.php,以便PHP呈现引擎知道该文件确实是PHP。

在代码中开始使用includes和require。这样,您可以将所有代码拆分为可管理的模块。最好将所有函数存储在functions.php文件中,然后在索引中,在开头的html标记上方的顶部调用它,使用:

<?php require ('functions.php'); ?>
<html>

所有的包含应该看起来类似,但在他们自己的目录中看起来像:

<?php include ('includes/header_inc.php'); ?>

这就是我编写包含文件的方法。最后的_inc是可选的。您可以将其保留为

header.php

我是新手,所以如果您觉得难以理解,我会道歉。 这是官方页面的链接,以便您更好地了解包含: http://php.net/manual/en/function.include.php

并且要求:http://php.net/manual/en/function.require.php

请记住用.php而不是.html结束你的php文件,否则你的代码将不会被PHP引擎解析。 在您熟悉所包含链接中的内容后,请仔细阅读文档。

答案 1 :(得分:0)

将其重命名为index.php并插入php include

<?php include ("file_name"); ?>

如果你真的希望html在php模式下工作,你需要从服务器端启用它。

答案 2 :(得分:0)

你不能用javascript包含PHP文件,因为PHP只对PHP解析器是“可读的”(那可以包含在服务器中), 但你可以使用Ajax。 http://www.ajax-tutor.com/post-data-server.html

function PostData() {
    // 1. Create XHR instance - Start
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }
    // 1. Create XHR instance - End

    // 2. Define what to do when XHR feed you the response from the server - Start
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200 && xhr.status < 300) {
                document.getElementById('div1').innerHTML = xhr.responseText;
            }
        }
    }
    // 2. Define what to do when XHR feed you the response from the server - Start

    var userid = document.getElementById("userid").value;

    // 3. Specify your action, location and Send to the server - Start 
    xhr.open('POST', 'verify.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("userid=" + userid);
    // 3. Specify your action, location and Send to the server - End
}