如果我在1个php文件中有2个函数，如何告诉ajax向哪个函数发送POST？

Question

I have 2 functions in 1 php file, one for upvote and 1 for downvote. How to tell ajax to post to the function with name upvoteImage()? I'm literally starting out with ajax so I'm having some troubles figuring things out.

Javascript file

$('.arrowUp').click(function(){
        var id = $("input[name='id']").val();
        var userId = $("input[name='userId']").val();
        $.post('../includes/voting.inc.php', {id: id, userId: userId}, function(data){
            alert(data);
        });

    });

PHP file

function upvoteImage($conn) {
        if (isset($_POST['upvoteImage'])){

            $imageId = $_POST['id'];
            $userId = $_POST['userId'];

            $sql3 = "SELECT * FROM votingconnection WHERE userId='".$userId."' and imageId='".$imageId."'";
            $result3 = mysqli_query($conn, $sql3);
            $getResult3 = mysqli_fetch_assoc($result3);

            if ($getResult3['vote'] == 'downvote') {

                $sql4 = "UPDATE votingconnection SET vote='upvote' WHERE userId='".$userId."' and imageId='".$imageId."'";
                $result4 = mysqli_query($conn, $sql4);

                $sql5 = "UPDATE image SET upvotes = upvotes + 1 WHERE id='$imageId'";
                $result5 = mysqli_query($conn, $sql5);

                $sql6 = "UPDATE image SET downvotes = downvotes - 1 WHERE id='$imageId'";
                $result6 = mysqli_query($conn, $sql6);

                header("Location: ../index.php");

            } else {

            $sql = "INSERT INTO votingconnection (userId, imageId, vote) VALUES ('".$userId."','".$imageId."', 'upvote')";
            $result = mysqli_query($conn, $sql);

            $sql2 = "UPDATE image SET upvotes = upvotes + 1 WHERE id='$imageId'";
            $result2 = mysqli_query($conn, $sql2);

            header("Location: ../index.php");

        }

        }
    }

I just can't understand how to connect the index page, the page with the logic for upvote/downvote and the javascript page. This is part of my index page.

<?php

    if (isset($_POST['action']) && in_array($_POST['action'], ['upvote', 'downvote'])) {
        if ($_POST['action'] == 'upvote' ) {
            upvoteImage($conn);
        } else {
            downvoteImage($conn);
        }
    }

    $currentUser = $_SESSION['id'];

    $sql = "SELECT * FROM image"; 
    $result = mysqli_query($conn, $sql);
    $getResult = mysqli_fetch_assoc($result);

    $numberOfResults = mysqli_num_rows($result);
    $resultsPerPage = 5;
    $numberOfPages = ceil($numberOfResults/$resultsPerPage);

    if (!isset($_GET['page'])) {
        $page = 1;
    } else {
        $page = $_GET['page'];
    }

    $currentPageResults = ($page-1)*$resultsPerPage;

    $sql2 = "SELECT * FROM image ORDER BY id DESC LIMIT ".$currentPageResults.','.$resultsPerPage;
    $result2 = mysqli_query($conn, $sql2);

    while($row = $result2->fetch_assoc()) { 

        $sql3 = "SELECT * FROM votingconnection WHERE userId='".$currentUser."' and imageId='".$row['id']."'";
        $result3 = mysqli_query($conn, $sql3);
        $getResult3 = mysqli_fetch_assoc($result3);
        $hasVoted = mysqli_num_rows($result3);
        $vote = $getResult3['vote'];

        echo    "<div class='imageContainer'>" 
                ."<h1>".$row["name"].'</h1>' 
                .'<div class="stickyImageContainer"><a href="imageInfo.php?image='.$row["path"].'"><img class="uploadedImg" src="uploads/'.$row["path"] .'" alt="Random image" /></a> ';
        if (isset($_SESSION['id'])) {
        if ($hasVoted < 1) {
            echo    "<div class='upvoteDownvoteRatingContainer'><form class='upvoteImage' method='POST' action=''>
                        <input type='hidden' name='action' value='upvote'>
                        <input type='hidden' name='id' value='".$row['id']."'>
                        <input type='hidden' name='userId' value='".$currentUser."'>
                        <button class='upvoteImageButton' type='submit' name='upvoteImage'><img class='arrowUp' src='../images/Social Media/arrowUp.png' alt='submit'></button>
                    </form>";

            echo "<div class='ratingNumber'>";
                if ($row['upvotes'] - $row['downvotes'] <= 0) {
                    echo "<p>0</p>";
                } else {
                    echo $row['upvotes'] - $row['downvotes'];
                }

            echo "</div>";

            echo    "<form class='downvoteImage' method='POST' action=''>
                        <input type='hidden' name='action' value='downvote'>
                        <input type='hidden' name='id' value='".$row['id']."'>
                        <input type='hidden' name='userId' value='".$currentUser."'>
                        <button class='downvoteImageButton' type='submit' name='downvoteImage'><img class='arrowDown' src='../images/Social Media/arrowDown.png' alt='submit'></button>
                    </form></div>";
        }

Answer 1

Ajax is not "posting to a function", it's only a way to request a page from the server.

The code in your page is the one that should decide what to do, so basically you can just call the function in your page:

function upvoteImage() {
    ....
}
upvoteImage()

Of check the data you got from the client, and based on that data - run the relevant function:

function upvoteImage() {
    ....
}
if ($_POST['do_upvote']) {
    upvoteImage()
}

Answer 2

您可以通过发送带有诸如"type:"upvote"或"type:"downvote"标签的帖子数据来调用函数，然后在php中，根据该标签调用函数upvoteImage或doenVoteImage。

Answer 3

You don't tell ajax to post to a function specifically. Instead tell ajax to post to a file specifically.

$('.arrowUp').click(function(){
    var id = $("input[name='id']").val();
    var userId = $("input[name='userId']").val();
    $.post('../includes/upvote.inc.php', {id: id, userId: userId}, function(data){
        alert(data);
    });

});

$('.arrowDown').click(function(){
    var id = $("input[name='id']").val();
    var userId = $("input[name='userId']").val();
    $.post('../includes/downvote.inc.php', {id: id, userId: userId}, function(data){
        alert(data);
    });

});

One for handling the upvote, and the other the downvote.

Answer 4

Either send the preferred action (upvote or downvote) along with the query part of the URL, or send a separate action data(upvote or downvote) along with id and userId .

Method(1):

// for downvote, URL would be ../includes/voting.inc.php?action=downvote
$.post('../includes/voting.inc.php?action=upvote', {id: id, userId: userId}, function(data){
    alert(data);
});

And process the request in voting.inc.php page the following way,

if($_GET['action'] == "upvote"){
    // call upvoteImage function
}else if($_GET['action'] == "downvote"){
    // call downvoteImage function
}

Method(2):

// for downvote, {id: id, userId: userId, action: 'downvote'}
$.post('../includes/voting.inc.php', {id: id, userId: userId, action: 'upvote'}, function(data){
    alert(data);
});

And process the request in voting.inc.php page the following way,

if($_POST['action'] == "upvote"){
    // call upvoteImage function
}else if($_POST['action'] == "downvote"){
    // call downvoteImage function
}

Answer 5

You can simply do this via data-* attribute and make your voting buttons like this

<button class="vote" data-type="up" data-id="1" data-user-id="2">Up</button>
<button class="vote" data-type="down" data-id="1" data-user-id="2">Down</button>

then you can simply send the ajax request like this

$('.vote').click(function() {
    var data = {
        id:     $(this).data('id'),
        userId: $(this).data('user-id'),
        type:   $(this).data('type')
    };

    $.post('../includes/voting.inc.php', data, function(data){
        alert(data);
    });
});

Finally, in your server side you can check the type and call functions

if (isset($_POST['type']) && $_POST['type'] == "up"){
    // Call upvote function here
}
else if (isset($_POST['type']) && $_POST['type'] == "down"){
    // Call downvote function here
}
else {
    // Abort if invalid
}