Размещение данных на сервере, за кулисами

Question

Я создаю веб-сайт, на котором есть страница, на которую пользователи могут добавлять контент, и они могут переставлять div в зависимости от того, какую позицию и размер они хотят. Я хотел бы иметь кнопку сохранения, которая сохраняет текущую позицию каждого деления; однако я не хочу, чтобы страница обновлялась каждый раз (у меня также будет автосохранение, при котором информация будет сохраняться в фоновом режиме).

Я не могу понять, как разместить данные на сервере, не вызывая перезагрузку страницы. Я полагаю, что мне нужен какой-то AJAX-запрос, но я не могу найти ничего, что говорит мне, как это сделать (все примеры AJAX, которые я могу найти, относятся к чтению данных с сервера). Я думаю, что я только сейчас начинаю ходить кругами, но я не могу обдумать это вообще - я знаю, что это, наверное, не сложно, но я все еще путаюсь с различными примерами.

Так, во-первых, это лучший способ сделать это? И если да, может ли кто-нибудь указать мне на простой пример публикации данных через AJAX? Я уже использую jQuery, поэтому могу использовать его и для Ajax.

Спасибо.

Answer 1

Супер простой AJAX с jQuery:

$.ajax({
    url: '/save-the-stuff-url',
    type: 'POST',
    data: {
        // information about your divs, etc.
        'foo' : 'bar'
    },
    success: function(response) {
        // if the AJAX call completes successfully, this function will get called.
        alert('POST successful!');
    }
});

Дайте ему шанс!

Answer 2

Вот, попробуйте это для AJAX:

$.post("example.php", {
        from : "ajax", // put some info in these - they are the params
        time : "2pm",
        data : "save"
    },
    function(data) { // callback function - data always passed to it
        $("#success").html(data); // do something with that data
    }
);

И поместите это куда-нибудь:

<span id='success'></span>

А затем попробуйте этот пример для примера .php:

<?php
    if(isset($_POST['from']) and $_POST['from'] == 'ajax'){
        echo "<span style='color: green;'>Saved!</span>";
    }
    else {
        echo "<span style='color: red;'>Failure!</span>";
    }
?>

А затем просто измените их в соответствии с вашими потребностями, возможно, изменив файл цели.Что бы ни выводил скрипт - это то, что дается на запрос ajax.Это означает, что если бы это был мой PHP-скрипт:

<?php echo "Aloha!"; ?>

И это был мой javascript:

$("#output").load("myScript.php");

Тогда #output содержал бы "Aloha!".

Надеюсь, это поможет!

Answer 3

и страницы документации jQuery - отличный способ изучить jQuery. Страница для публикации - http://docs.jquery.com/Post

. Вы также можете захотеть взглянуть на перетаскиваемые объекты jQuery, если вы еще этого не используете ..

http://docs.jquery.com/UI/API/1.8/Draggable

Вы можете запустить сохранение, привязанное к перетаскиваемому объекту, который довольно легко отпустить с помощью

$( ".selector" ).draggable({
   stop: function(event, ui) { ... }
});

Answer 4

Пожалуйста, зайдите на сайт Jquery , чтобы найти различные примеры сообщений.

HTH