WordPress网站表单提交后通过AJAX更新投票计数器的技术问询

Got it! Since you already have a working AJAX function and a valid row count query, the fix is straightforward—you just need to re-trigger that count logic right after the form submission succeeds. Let’s break this down step by step:

1. Wrap the Vote Count Logic in a Reusable Function #

First, turn your existing count-and-display code into a standalone function. This way you can call it both on page load AND after form submission:

function refreshVoteTotal() {
    // Use your pre-tested AJAX function to hit the count endpoint
    yourExistingAjaxCall({
        url: '/api/calculate-vote-total', // Your backend route that runs the count query
        success: function(response) {
            // Update the page element showing the total votes (adjust the ID to match yours)
            document.getElementById('vote-count-display').textContent = `Total Votes: ${response.total}`;
        }
    });
}

Your backend route (/api/calculate-vote-total) should run your row count query—something like this SQL:

SELECT COUNT(*) AS total FROM your_votes_table;

Make sure the backend returns a JSON response like { "total": 42 }.

2. Call the Refresh Function After Form Submission #

In your form’s AJAX success callback, add a call to refreshVoteTotal() to update the count immediately after a successful vote:

function submitVoteForm(formData) {
    yourExistingAjaxCall({
        url: '/api/submit-vote',
        method: 'POST',
        data: formData,
        success: function() {
            // Optional: Show a success message to the user
            alert('Your vote has been recorded!');
            // Critical step: Refresh the vote count on the page
            refreshVoteTotal();
        },
        error: function() {
            alert('Oops, something went wrong. Please try again.');
        }
    });
}

3. Initialize the Count on Page Load #

Don’t forget to show the initial vote count when the page first loads:

// Run once when the page finishes loading
window.addEventListener('DOMContentLoaded', function() {
    refreshVoteTotal();
});

That’s it! Now every time a user submits their vote successfully, the bottom-of-page total will update without needing a full page refresh.

内容的提问来源于stack exchange，提问作者teninchhero