Jquery использует ajax post для управления html-шаблоном

#javascript #php #jquery #html #ajax

#javascript #php #jquery #HTML #ajax

Вопрос:

я делаю это

  1. Страница Php citySearchResultListElement.php

     <?php 
    $cityId =  $_GET['city_Id'];
    $cityName =  $_GET['city_screen_name'];
    ?>
    <li class="result">
    <a target="_blank" href="javascript:selectedCityInSearch('<?php echo $cityId; ?>','<?php echo $cityName; ?>');">
    <h2><?php echo $cityName; ?></h2></a>
    </li>
      
  2. Javascript, который выполняет этот вызов ajax

     function getMockupElementHtml(resourceObject,
    var url = 'pageMockups/'   resourceObject   '.php';
    var content = '';
    content = $.ajax({
            url: url,
            type: 'GET', 
            data: paramArray,
            dataType: 'text',
            crossDomain: true
        }).done(function (data) {
                                content = data;
                                    })
    .fail(function (xhr, textStatus, errorThrown) {
                        console.log(xhr.responseText);
                        console.log(textStatus);
                        console.log(errorThrown);
    
                        }
          );
    return content;
    }
      
  3. И я вызываю его из

     function test(resourceObject,paramArray)
    {
    var myObject = getMockupElementHtml(resourceObject,paramArray);
    console.log(myObject);
    return myObject;
    }
      

Используя инструменты отладки, я вижу, что MyObject — это не то, что я ожидал. Я ожидаю простой HTML-код, который я буду использовать в дальнейшем в другой функции, но я получаю это

 Object {readyState: 1, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function…}
abort: function (e){return e=e||S,oamp;amp;o.abort(e),T(0,e),this}
always: function (){return i.done(arguments).fail(arguments),this}
complete: function (){if(a){var t=a.length;(function r(t){v.each(t,function(t,n){var i=v.type(n);i==="function"?(!e.unique||!c.has(n))amp;amp;a.push(n):namp;amp;n.lengthamp;amp;i!=="string"amp;amp;r(n)})})(arguments),i?o=a.length:namp;amp;(s=t,l(n))}return this}
done: function (){if(a){var t=a.length;(function r(t){v.each(t,function(t,n){var i=v.type(n);i==="function"?(!e.unique||!c.has(n))amp;amp;a.push(n):namp;amp;n.lengthamp;amp;i!=="string"amp;amp;r(n)})})(arguments),i?o=a.length:namp;amp;(s=t,l(n))}return this}
error: function (){if(a){var t=a.length;(function r(t){v.each(t,function(t,n){var i=v.type(n);i==="function"?(!e.unique||!c.has(n))amp;amp;a.push(n):namp;amp;n.lengthamp;amp;i!=="string"amp;amp;r(n)})})(arguments),i?o=a.length:namp;amp;(s=t,l(n))}return this}
fail: function (){if(a){var t=a.length;(function r(t){v.each(t,function(t,n){var i=v.type(n);i==="function"?(!e.unique||!c.has(n))amp;amp;a.push(n):namp;amp;n.lengthamp;amp;i!=="string"amp;amp;r(n)})})(arguments),i?o=a.length:namp;amp;(s=t,l(n))}return this}
getAllResponseHeaders: function (){return E===2?i:null}
getResponseHeader: function (e){var n;if(E===2){if(!s){s={};while(n=pn.exec(i))s[n[1].toLowerCase()]=n[2]}n=s[e.toLowerCase()]}return n===t?null:n}
overrideMimeType: function (e){return E||(c.mimeType=e),this}
pipe: function (){var e=arguments;return v.Deferred(function(n){v.each(t,function(t,r){var s=r[0],o=e[t];i[r[1]](v.isFunction(o)?function(){var e=o.apply(this,arguments);eamp;amp;v.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[s "With"](this===i?n:this,[e])}:n[s])}),e=null}).promise()}
progress: function (){if(a){var t=a.length;(function r(t){v.each(t,function(t,n){var i=v.type(n);i==="function"?(!e.unique||!c.has(n))amp;amp;a.push(n):namp;amp;n.lengthamp;amp;i!=="string"amp;amp;r(n)})})(arguments),i?o=a.length:namp;amp;(s=t,l(n))}return this}
promise: function (e){return e!=null?v.extend(e,r):r}
readyState: 4
responseText: "<li class="result"><a target="_blank"  href="javascript:selectedCityInSearch('1925','Sarakhs (Iran, Islamic Republic Of)');">
<h2>Sarakhs (Iran, Islamic Republic Of)</h2></a>
</li>"
setRequestHeader: function (e,t){if(!E){var n=e.toLowerCase();e=w[n]=w[n]||e,b[e]=t}return this}
state: function (){return n}
status: 200
statusCode: function (e){if(e){var t;if(E<2)for(t in e)g[t]=[g[t],e[t]];else t=e[x.status],x.always(t)}return this}
statusText: "OK"
success: function (){if(a){var t=a.length;(function r(t){v.each(t,function(t,n){var i=v.type(n);i==="function"?(!e.unique||!c.has(n))amp;amp;a.push(n):namp;amp;n.lengthamp;amp;i!=="string"amp;amp;r(n)})})(arguments),i?o=a.length:namp;amp;(s=t,l(n))}return this}
then: function (){var e=arguments;return v.Deferred(function(n){v.each(t,function(t,r){var s=r[0],o=e[t];i[r[1]](v.isFunction(o)?function(){var e=o.apply(this,arguments);eamp;amp;v.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[s "With"](this===i?n:this,[e])}:n[s])}),e=null}).promise()}
  

proto: Объект

Значение, которое я ищу, — это значение после responseText:

Как я могу получить к нему доступ?

Спасибо

Ответ №1:

Ваша проблема в том, что вы оборачиваете асинхронный код в синхронный код и используете конфликтующие имена переменных.

 var content = '';
content = $.ajax({ //content variable is now a jqXHR object returned from $.ajax()
        url: url,
        type: 'GET', 
        data: paramArray,
        dataType: 'text',
        crossDomain: true
}).done(function (data) {
    content = data; //this does happen until AFTER content is returned to calling function
})
.fail(function (xhr, textStatus, errorThrown) {
                    console.log(xhr.responseText);
                    console.log(textStatus);
                    console.log(errorThrown);

                    }
      );
return content;//content is still jqXHR at this point
  

Чтобы исправить это, не используйте returns, просто делайте то, что вы хотите сделать с данными внутри обратного вызова:

 .done(function (data) {
        console.log(data);
    })
  

Комментарии:

1. Разве я не могу использовать вызов jQuery ajax для возврата значения функции javascript? Моя цель — использовать getMockupElementHtml в качестве «поставщика шаблонов» и обрабатывать то, что он возвращает в отдельной функции javascript…

2. @user3385666 да, если вы сделаете свой вызов ajax синхронным, но тогда вы заблокируете браузер до завершения вызова, что может занять некоторое время. Асинхронность — одна из сильных сторон javascripts, не пытайтесь бороться с ней.

3. Это именно то, что я искал. Не имеет значения, является ли вызов асинхронным, потому что это очень простой вызов, но он должен быть динамическим и вызываться через javascript. Большое спасибо!

Ответ №2:

Не уверен, но это может быть проблемой:

 function getMockupElementHtml(resourceObject,
  

выше вы не закрыли скобку «()», также кажется, что вы также пропустили некоторые аргументы.


Это должно быть:

 function getMockupElementHtml(resourceObject, paramArray){ // <---like this
  

Другое дело, что вы можете удалить эти:

 dataType: 'text',
crossDomain: true
  

и измените на это:

 dataType: 'html',
  

Комментарии:

1. Я уверен, что это проблема синхронности

2. Да, возможно, я что-то неправильно ввел в вопросе, где находится код, в любом случае функции в моем коде правильные, ошибки с отсутствующим параметром нет.