jQuery: использование ссылки <a>для отправки ajax-запроса

Question

Я пытаюсь отправить php-скрипт некоторый контент для хранения в базе данных через ajax. Я использую фреймворк jQuery. Я хотел бы использовать ссылку на странице, чтобы отправить информацию. У меня проблемы с написанием функции, которая будет отправлять и получать информацию, все, что я пробовал, является асимптотическим.

EDIT

Идея состоит в том, что пользователь щелкает ссылку, а столбец с именем "show_online" (крошечное целое число) в таблице с именем "списки" обновляется до 1 или 0 (** простой двоичный переключатель!) успех, конкретная ссылка, по которой щелкнули, будет обновлена ​​(если она отправила 1 раньше, она будет установлена ​​в 0).

EDIT

На странице будет 20-30 таких ссылок. Я установил каждый содержащий div с уникальным идентификатором ('onlineStatus'). Я бы не хотел иметь отдельную функцию js для каждого экземпляра.

Любая помощь очень ценится. Основной код ниже.

<script type="text/javascript"> 
    function doAjaxPostOnline( shouldPost, bizID ){
        load("ajaxPostOnline.php?b='+bizID+'&p='+shouldPost", jsonData, callbackFunction);
function callbackFunction(responseText, textStatus, XMLHttpRequest)
{
  // if you need more functionality than just replacing the contents, do it here
}

        }
    }
</script>   


<!-- the link that submits the info -->: 
<div id='onlineStatus<?php echo $b_id ?>'>
<a href='#' onclick="doAjaxPostOnline( 0, <?php echo $b_id ?> ); return false;" >Post Online</a>
</div>  

ajaxPostOnline.php

<!-- ajaxPostOnline.php ... the page that the form posts to -->
<?php
    $id = mysql_real_escape_string($_GET['b']);
    $show = mysql_real_escape_string($_GET['p']);

    if( $id && ctype_digit($id) && ($show == 1 || $show == 0) ) {
        mysql_query( "UPDATE listing SET show_online = $show
        WHERE id = $id LIMIT 1" );
    }

    if($result) {
        if($show == '0'){
            $return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline( 1, <?php echo $b_id ?> ); return false;' >Post Online</a>";
        }
        if($show == '1'){
            $return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline( 0,  $b_id ); return false;' >Post Online</a>";
        }
        print json_encode(array("id" => $id, "return" => $return));
    }
?>

Answer 1

Функция load () в jQuery действительно хороша для такого рода вещей.

Вот пример. По сути, у вас есть внешний div в качестве контейнера. Вы вызываете скрипт / сервис, который возвращает html. В этом html есть div с идентификатором, на который вы будете ссылаться позже при вызове ajax. Замена div заменяет внутренний html контейнера div. Вы передаете свои данные как объект json как второй параметр в метод загрузки, и вы можете передать ссылку на функцию обратного вызова в качестве третьего параметра. Функция обратного вызова будет получать всю возможную информацию из ответа (полный текст ответа для дальнейшего анализа / обработки, код состояния http и объект XMLHttpRequest, связанный с этим вызовом ajax).

$("#id_of_some_outer_div").load("somepage.php #id_of_replacement_div", jsonData, callbackFunction);

function callbackFunction(responseText, textStatus, XMLHttpRequest)
{
  // if you need more functionality than just replacing the contents, do it here
}

Итак, в вашем случае вы говорите о замене ссылок. Поместите исходную ссылку в div с обеих сторон операции.

Вот ссылка на API-документ jQuery для load ():

нагрузка

EDIT:

В ответ на ваш комментарий о выполнении нескольких замен за один проход:

Вы можете сделать так, чтобы функция обратного вызова делала всю работу за вас.

1. Добавьте уникальный класс CSS ко всем элементам div, которые нужно заменить. Это позволит вам выбрать все из них в один выстрел. Помните, что элементы html могут иметь более одного класса css (это то, что означает «c» в CSS ). Таким образом, все они будут <div id="[some unique id]" class="replace_me"... Тогда, если у вас установлена ​​переменная $("div.replace_me"), это будет коллекция всех элементов div со стилем replace_me.
2. Любые элементы, которые приходят из вызова ajax (будь то другой контейнер div или просто один элемент "a"), должны иметь уникальный идентификатор, аналогичный контейнеру, в который они должны быть вставлены. Например, div_replace1 будет идентификатором контейнера, а div_replace1_insert будет идентификатором вставляемого элемента
3. Внутри функции обратного вызова итерируйте замены, используя $("div.replace_me").each(function(){ ...
4. Внутри каждой итерации ключевое слово "this" относится к текущему элементу. Вы можете получить идентификатор этого элемента, иметь переменную типа var replacement_id = this.id + "_insert"; (как в примере выше), которая теперь является уникальным идентификатором элемента, который вы хотите вставить. $("#" + replacement_id) теперь даст вам ссылку на элемент, который вы хотите вставить. Вы можете сделать вставку примерно так: this.html( $("#" + replacement_id) );

Возможно, вам придется отредактировать код выше (он не тестировался), но это будет общая идея. Вы можете использовать соглашения об именах, чтобы связать элементы в возвращаемых данных ajax с элементами на странице, итерировать элементы на странице с «каждым» и заменить их this.html ()

Answer 2

Если я не ошибаюсь, похоже, у вас ошибка при смешивании AJAX и серверных сценариев.

Это зависит от того, выполняется ли синтаксический анализ $ return где-либо после фрагмента присваивания в ajaxPostOnline.php (вряд ли, если он вызывается из AJAX!).

$return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline( 1, <?php echo $b_id ?> ); return false;' >Post Online</a>";

Конечно, это должно быть:

$return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline( 1, ".$id." ); return false;' >Post Online</a>";

Answer 3

Поскольку ваш php-скрипт возвращает json, вы должны установить для dataType значение json. Обратите внимание, что в вашем примере размещенного кода функция success () была за пределами $ .ajax (), и она должна быть внутри.

 $.ajax({
   url: "ajaxPostOnline.php?b=" + bizID + "&p=" + shouldPost,
   dataType: "json",
   success: function(json){
     $("#onlineStatus" + bizID).html(json.return);
   }
 });

Возможно, вы захотите проверить метод getJSON, поскольку он более лаконичен для этой конкретной ситуации.

$.getJSON("ajaxPostOnline.php", {b:bizID, p:shouldPost}, function(json) {
    $("#onlineStatus" + bizID).html(json.return);
});

РЕДАКТИРОВАТЬ: Оригинальный вопрос был отредактирован, и предоставленный образец значительно изменился. Я все еще рекомендую метод $ .getJSON.

Answer 4

Вы действительно хотели объявить свою функцию возврата ajax как

function(html)

? .. я думаю, может быть, вы имеете в виду, что параметром является «данные»?