如果没有设置正确的操作属性,以下代码如何工作?

时间:2016-08-25 08:39:56

标签: php jquery ajax

我在名为service.php的文件中有一个代码,其执行如下:

if ((!empty($_POST)) && ($_POST['action'] == 'addRunner'))
{
    // Code to add entry into database
}

function fail($message) 
{
    die(json_encode(array('status' => 'fail', 'message' => $message)));
}
function success($message) 
{
    die(json_encode(array('status' => 'success', 'message' => $message)));
}

使用AJAX通过POST方法发送数据的文件是:

$("#btnSave").click(function() 
{
    var data = $("#addRunner :input").serialize();

    $.post($("#addRunner").attr('action'), data, function(json)
    {
        if(json.status == 'fail')
            alert(json.message);

        if(json.status == 'success')
        {
            alert(json.message);
            clearInputs();
        }
    },"json");
});

#addRunner形式的action属性是:

<form action="service.php" id="addRunner" name="addRunner" method="POST">
    <!-- Form Elements -->
</form>

请注意,表单元素的操作属性只是service.php而不是service.php?action=addRunner。但是,表单仍然可以正常工作,并成功地将新的“跑步者”信息添加到数据库中。这是怎么发生的?

条件($_POST['action'] == 'addRunner')是否应该失败并阻止代码在运行时将数据输入数据库?

为了完整起见,我的代码的完整性如下所示。

我的HTML是:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>2011 Race Finishers</title> 
        <link href="styles/my_style.css" rel="stylesheet">
    </head> 
    <body> 
        <header>
            <h2>2011 Race Finishers!</h2>
        </header>
        <div id="main">
            <ul class="idTabs"> 
                <li><a href="#male">Male Finishers</a></li> 
                <li><a href="#female">Female Finishers</a></li> 
                <li><a href="#all">All Finishers</a></li> 
                <li><a href="#new">Add New Finishers</a></li>
            </ul> 
            <div id="male">
                <h4>Male Finishers</h4>
                <ul id="finishers_m"></ul>
            </div> 
            <div id="female">
                <h4>Female Finishers</h4>
                <ul id="finishers_f"></ul>      
            </div>
            <div id="all">
                <h4>All Finishers</h4>
                <ul id="finishers_all"></ul>
            </div>
            <div id="new">
                <h4>Add New Finishers</h4>
                <form action="service.php" id="addRunner" name="addRunner" method="POST">
                    First Name: <input type="text" name="txtFirstName" id="txtFirstName"> <br>
                    Last Name: <input type="text" name="txtLastName" id="txtLastName"> <br>
                    Gender: <select name="ddlGender" id="ddlGender">
                        <option value="">--Please Select--</option>
                        <option value="m">Male</option>
                        <option value="f">Female</option>
                    </select> <br>
                    Finish Time: 
                    <input type="text" id="txtMinutes" name="txtMinutes" size="10" maxlength="2">
                    <input type="text" id="txtSeconds" name="txtSeconds" size="10" maxlength="2">
                    <br><br>
                    <button id="btnSave" type="sumbit" name="btnSave">Add Runner</button>
                    <input type="hidden" id="action" name="action" value="addRunner">
                </form>
            </div>
        </div>
        <footer>
            <h4>Congratulations to all our finishers!</h4>
            <button id="btnStart">Start Page Updates</button>
            <button id="btnStop">Stop Page Updates</button>
            <br>
            <span id="freq"></span><br><br>     
            Last Updated: <div id="updatedTime"></div>
        </footer>
        <script src="scripts/jquery-1.6.2.min.js"></script>
        <script src="scripts/my_scripts.js"></script>
        <script src="scripts/jquery.idTabs.min.js"></script>
    </body>
</html>

我的jQuery是:

$(document).ready(function(){

    var FREQ = 10000 ;
    var repeat = true;

    function showFrequency(){
        $("#freq").html( "Page refreshes every " + FREQ/1000 + " second(s).");
    }

    function startAJAXcalls(){

        if(repeat){
            setTimeout( function() {
                    getDBRacers();
                    startAJAXcalls();
                },  
                FREQ
            );
        }
    }

    function getXMLRacers(){
        $.ajax({
            url: "finishers.xml",
            cache: false,
            dataType: "xml",
            success:  function(xml){

                $('#finishers_m').empty();
                $('#finishers_f').empty();
                $('#finishers_all').empty();

                $(xml).find("runner").each(function() {
                    var info = '<li>Name: ' + $(this).find("fname").text() + ' ' + $(this).find("lname").text() + '. Time: ' + $(this).find("time").text() + '</li>';
                    if( $(this).find("gender").text() == "m" ){
                        $('#finishers_m').append( info );
                    }else if ( $(this).find("gender").text() == "f" ){
                        $('#finishers_f').append( info );
                    }else{  }
                    $('#finishers_all').append( info );
                });

                getTimeAjax();
            }
        });
    }

    function getDBRacers()
    {
        $.getJSON("service.php?action=getRunners", function(json)
        {
            if(json.runners.length > 0)
            {
                $('#finishers_m').empty();
                $('#finishers_f').empty();
                $('#finishers_all').empty();

                $.each(json.runners, function() 
                {
                    var info = '<li>Name: ' + this['fname'] + ' ' + this['lname'] + '. Time: ' + this['time'] + '</li>';
                    if(this['gender'] == 'm')
                    {
                        $('#finishers_m').append(info);
                    }
                    else if(this['gender'] == 'f')
                    {
                        $('#finishers_f').append(info);
                    }
                    else {}

                    $('#finishers_all').append(info);
                });
            }
        });
        getTimeAjax();
    }

    function getTimeAjax(){
        var time = "";
        $.ajax({
            url: "time.php",
            cache: false,
            success: function(data){
                $('#updatedTime').html(data);
            }
        });
    }

    $("#btnStop").click(function(){
        repeat = false;
        $("#freq").html( "Updates paused." );
    });

    $("#btnStart").click(function(){
        repeat = true;
        startAJAXcalls();
        showFrequency();
    }); 

    showFrequency();
    getDBRacers();
    startAJAXcalls();

    $("#btnSave").click(function() 
    {
        var data = $("#addRunner :input").serialize();

        $.post($("#addRunner").attr('action'), data, function(json)
        {
            if(json.status == 'fail')
                alert(json.message);

            if(json.status == 'success')
            {
                alert(json.message);
                clearInputs();
            }
        },"json");
    });

    function clearInputs()
    {
        $("#addRunner:input").each(function(){
            $(this).val('');
        });
    }

    $("#addRunner").submit(function() {
        return false;
    });

});

最后,Service.php的内容是:

<?php

    if ((!empty($_POST)) && ($_POST['action'] == 'addRunner'))
    {
        $fname = htmlspecialchars($_POST['txtFirstName']);
        $lname = htmlspecialchars($_POST['txtLastName']);
        $gender = htmlspecialchars($_POST['ddlGender']);
        $minutes = htmlspecialchars($_POST['txtMinutes']);
        $seconds = htmlspecialchars($_POST['txtSeconds']);

        if(preg_match('/[^\w\s]/i', $fname) || preg_match('/[^\w\s]/i', $lname)) 
        {
            fail('Invalid name provided.');
        }
        if( empty($fname) || empty($lname) ) 
        {
            fail('Please enter a first and last name.');
        }
        if( empty($gender) ) 
        {
            fail('Please select a gender.');
        }
        if( empty($minutes) || empty($seconds) ) {
            fail('Please enter minutes and seconds.');
        }

        $time = $minutes.":".$seconds;
        $query = "INSERT INTO runners SET first_name='$fname', last_name='$lname', gender='$gender', finish_time='$time'";
        $result = db_connection($query);

        if ($result) 
        {
            $msg = "Runner: ".$fname." ".$lname." added successfully" ;
            success($msg);
        } 
        else 
        { 
            fail('Insert failed.');
        } 
        exit;
    }
    else if($_GET['action'] == 'getRunners')
    {

        $query = "SELECT first_name, last_name, gender, finish_time FROM runners ORDER BY finish_time ASC";
        $result = db_connection($query);

        $runners = array();

        while($row = mysqli_fetch_array($result))
        {
            array_push($runners, array('fname' => $row['first_name'], 'lname' => $row['last_name'], 'gender' => $row['gender'], 'time' => $row['finish_time']));
        }

        echo json_encode(array("runners" => $runners));
        exit;
    }

    function db_connection($query)
    {
        $dbc = mysqli_connect('127.0.0.1','runner_db_user','runner_db_password','race_info')
            or die('Error connecting to Database');

        return mysqli_query($dbc,$query);
    }

    function fail($message) 
    {
        die(json_encode(array('status' => 'fail', 'message' => $message)));
    }
    function success($message) 
    {
        die(json_encode(array('status' => 'success', 'message' => $message)));
    }

?>

1 个答案:

答案 0 :(得分:1)

这背后的工作原因是action是来自隐藏字段的name属性的值。这不是您的form标记的操作。如果您想使其失败以进行测试,您应该将隐藏字段的值更改为form中的其他内容,然后再次检查。

这是你的隐藏字段

<input type="hidden" id="action" name="action" value="addRunner">

你可以这样做只测试

<input type="hidden" id="action" name="action" value="addRunners">

它不会满足此if条件

if ((!empty($_POST)) && ($_POST['action'] == 'addRunner'))