Ajax提交不起作用

Question

I'll make it easy, I want to submit data without using a form, etc, etc, etc... I have this code:

HTML

<span class="categ-edit">Edit</span>
<span class="categ-add">Add</span>
<span class="categ-delete">Delete</span>

JQUERY

$('.categ-edit').click(function() {
    $.ajax({
    url: 'categoryactions.php',
    type: 'POST',
    data: {action: 'edit'},
    });
    window.location.href = "categoryactions.php";
});

$('.categ-add').click(function() {
    $.ajax({
    url: 'categoryactions.php',
    type: 'POST',
    data: {action: 'add'},
    });
    window.location.href = "categoryactions.php";
});

$('.categ-delete').click(function() {
    $.ajax({
    url: 'categoryactions.php',
    type: 'POST',
    data: {action: 'delete'},
    });
    window.location.href = "categoryactions.php";
});

And in categoryactions.php I have this:

PHP

<?php

    $action = $_POST['action'];
    echo $action;

?>

But when it redirects me to categoryactions.php I get nothing. I'm not sure if that's the way to submit data with AJAX but at least I tried. If someone knows how to fix this, I'll be grateful!

Answer 1

You click handler is making two separate requests. First, you are sending a request with AJAX, then you are going to the page. When you look at the page, you won't see the result because the result was given to the AJAX request.

The point of AJAX is to avoid changing the page.

Try this:

$('.categ-edit').click(function() {
    $.ajax({
        url: 'categoryactions.php',
        type: 'POST',
        data: {action: 'edit'},
        success: function(data) {
            alert(data);
        }
    });
});