динамическое получение ответа от ajax / jquery

#javascript #php #jquery #ajax

Вопрос:

Я создал приложение, в котором пользователь вводит arabic текст, я конвертирую его в english [Транслитерация]. Это происходит, когда пользователь нажимает кнопку.

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

Я использовал ajax, который принимает пользовательский ввод и отправляет его в php-скрипт для транслитерации. Ответ от скрипта я отображаю в результирующем окне.

Вот как я выполняю действие для button click события

     $( "#en2ar" ).click(function() {
            //var cat = $("#cats option:selected").html();
//          alert(test);
            var english = document.getElementById("english").value;
            //alert (arabic)
            en2ar(english);
            return false;
            });

        function en2ar(english)
        {               
            var xmlhttp;
            arabic.value = '';
            if (window.XMLHttpRequest)
            {
                // code for IE7 , Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }           
            xmlhttp.onreadystatechange=function()
            {
                //document.getElementById("old-records").innerHTML = "";                
                if (xmlhttp.readyState == 4 amp;amp; xmlhttp.status==200)
                {
                    var div2 = document.getElementById("arabic");
                                div2.innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("POST","processAra.php");          
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send('arabic='   english   'amp;type='   'en' ) ;          
            //alert(arabic);
        }

1. В чем проблема? Запустите свой код в keyup обработчике поля ввода.

2. Почему бы вам не использовать $.ajax() вместо всего этого подробного Javascript?

3. вы можете использовать функцию keyup

4. @Barmar: спасибо, я воспринял это как очень сложную работу, keyup я не думал о

Ответ №1:

Вместо

  $( "#en2ar" ).click(function() {

использовать

  $( "#en2ar" ).keyup(function() {

который будет получать текст всякий раз, когда пользователь напишет какой-либо текст.

1. #en2ar это кнопка, а не поле ввода.

2. Замените этот #en2ar на любой идентификатор, который вы используете для поля ввода… Хотя это отнимет большую часть вашей пропускной способности… Таким образом, вы можете использовать вместо этого размытие… Это приведет к преобразованию только тогда , когда пользователь удалит фокус из поля ввода … Хотя это полностью зависит от ваших требований

Ответ №2:

 $("#english").keyup(function() {
        var english = $("#english").val();
            //alert (arabic)
            en2ar(english);
            return false;     
});

вы можете использовать функцию key up .