Ajax Ссылки и JQuery

Question

Продолжая просто шутить, мне было интересно, что на моем сайте есть ссылка «Добавить». После щелчка по ней страница обновится и появится надпись удалить. Я полагаю, что это будет лучше с ajax и не требует перезагрузки страницы. Как мне сделать это с помощью jquery (должен ли я сделать это в jquery?) И как узнать, когда сервер получает добавление, чтобы я мог обновить свою картинку (я уверен, что состояние обработки / завершения?)

Answer 1

Функции jQuery AJAX позволяют вам указывать функции успеха и неудачи, которые вы можете использовать для обновления своей страницы.

$("#mylink").click (function (event) {
  $.ajax({
    type: "POST", // or GET
    url: "/my/address.php",
    data: "someData=someThing&someMore=somethingElse",
    success: function(data) {
      $("#someElement").doSomething().
    },
    error: function() {
      // something's gone wrong.
    }
  });

  event.preventDefault(); // stop the browser following the link
});

Подробнее читайте на странице jQuery AJAX - там много примеров).

Answer 2

Вы можете сделать это Jquery, это отличный инструмент для этого.

Как правило, добавьте обработчик событий клика к вашей ссылке, как показано ниже:

<a href="/url" id="add-button">  Add </a>

<script>

function callback(response) {
  // remove add button here and add the "remove " button
 }

 $('#add-button').click( function() {
   $.get( this.href, data, callback);
  //or
   $.post( this.href, data, callback);
 }

</script>

Answer 3

• Создайте функцию, которая срабатывает при нажатии на ссылку.
• сделать ajax-вызов серверу.
• Вы можете определить метод обратного вызова, который будет запускаться при успешном вызове ajax.
• В функции обратного вызова: изменить Добавить на Удалить.

В двух словах: -)

Answer 4

Это будет необходимая функция jQuery: http://docs.jquery.com/Events/toggle

Answer 5

Краткое введение в jquery.

HTML:

<a href="#" id="mylink"><img src="add.jpg"/></a>

Javascript:

$(function() {
   //Everything inside here is called on page-load

   // This selects the link element by its id and add an onclick handler
   $("#mylink").click(function() {
        post_url = (The url to post to the server);
        $.post(url, function() {
           // This is called when the AJAX finishes successfully.

           // Select the image element and modify the src attribute
           $("#mylink img").attrib("src", "remove.jpg");
        });
   });
});

Answer 6

Вы должны сделать это с помощью jQuery:)

что-то вроде ...

$("#input").click(function(){
    if( $("#input").val() == "add" ) {
        $("#input").val("remove");
    }
});

Добавьте туда ajax для выполнения работы.