Преобразование AJAX в JQuery - PullRequest
Новая
       0

Преобразование AJAX в JQuery

2 голосов
/ 22 ноября 2010

Как бы вы конвертировали следующий код для использования только библиотеки jquery? 

<html>
<head>
<script>
function do_it(value)
{
function newXMLHttpRequest()
{
   try{ return new XMLHttpRequest(); }catch(e){}
   try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){}
   try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){}
   return null;
}

var ajax_request = false;
ajax_request = newXMLHttpRequest();
var url = "test.pl?b64="+value;
    ajax_request.open("GET",url,1);
    ajax_request.onreadystatechange = function()
    {
        if(ajax_request.readyState == 4)
        {

            var response = ajax_request.responseText;
            document.getElementById("in").innerHTML = response;

        }
    }
    ajax_request.send(null);
}
</script>
</head>
<body>

<form>
<input type="text" name="string" onkeyup="do_it(this.value)"/>
<input type="submit" name="submit">
</form>
<div style="position:absolute;width:200px;height:200px; background-color:yellow; margin-top:100px;" id="in"></div>

</body>
</html>

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

Ответы [ 5 ]

5 голосов
/ 22 ноября 2010

взгляните на jquerys load () - я думаю, это то, что вы ищете: 

function do_it(value){
  $('#in').load('test.pl', { b64: value });
}

РЕДАКТИРОВАТЬ: если вы хотите иметь разные обработчики ошибок и успешных операций, используйте ajax () , как и другие опубликованные, будет путь, но для простого get- load-and-put-it-to-that-div-request, load () более короткая и простая.

EDIT2: на ваш комментарий: лучше всего было бы идентифицировать ваше поле ввода любым способом (дать ему идентификатор или присвоить одинаковый класс каждому полю, которое должно получить это событие) и тогда просто сделайте: 

$('#mytextfield').keyup(function(){ // with id-selector
  do_it($(this).val());
});

$('.textfield').keyup(function(){ // with class-selector
  // whatever
});

(нет: я не проверял это, просто пишу в уме ... если есть проблема, просто взгляните на документацию )

4 голосов
/ 22 ноября 2010 
$.ajax({
  url: 'test.pl?b64=' + value,
  success: function(data) {

      // document.getElementById("in").innerHTML = data; 

      $("#in").html(data);  // jQuery way instead of above line

  }
});

Примечание: не тестировалось, но не должно быть слишком сложно выяснить, что делает этот код.

2 голосов
/ 22 ноября 2010

Наиболее похожей функцией jQuery будет $. Получить . 

$.get('test.pl?b64=' + value, function(data) {
  $('#in').html(data);
});
2 голосов
/ 22 ноября 2010 
function getData(service, successFunction, failureFunction, getDataType) {
    $.ajax({
        type: 'get',
        cache: false,
        url: service,
        error: function(XMLHttpRequest, textStatus, errorThrown){
            failureFunction(XMLHttpRequest, textStatus, errorThrown);  //Pass error details to the failure function
        },
        success: function(data) {
            successFunction(data); //pass data to the success function
        },
        dataType: getDataType
    });
}

Что-то в этом роде, когда службой является URL, функция successFunction - это та, которую вы делаете с данными, а dataType - ожидаемый тип данных, которые вы будете получать.

JQuery Docs

Это может показаться немного сложным, извините, я склонен использовать замыкания, поэтому у меня есть только одна или две универсальные функции AJAX (GET и POST), для всех, кто интересуется здесь, есть пример функции, вызывающей функцию getData выше 

function getUserLabs()
{
    function successFunction(data){
        userLabs = new Array();
        $.each(data, function(i,item){
            var labID = data[i]['pk'];
            var labName = data[i]['fields']["name"];

            userLabs.push(new Array(labID, labName));
        });
    }

    function failureFunction(data) {
        alert("Data not received");
    }

    getData('lab/summary/', successFunction, failureFunction, 'json');
}
1 голос
/ 22 ноября 2010

Чтобы уменьшить объем кода, я предпочитаю использовать jQuery.post (). Вы можете прочитать больше об этом здесь http://api.jquery.com/jQuery.post/

На самом деле вы указали "GET" в качестве метода, поэтому лучшим вариантом здесь является jQuery.get (). Подробнее об этом можно прочитать здесь http://api.jquery.com/jQuery.get/

Пример: 

$.get("test.pl", { b64: value },
    function(data){
         document.getElementById("in").innerHTML = data;
     });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...