将ajax响应保存到jquery变量

Question

简单的问题， 我知道 ajax 是异步的，我有以下功能正在处理响应警报，正在工作但是，我的问题是我想知道如何将 ajax 响应的结果存储在模式的 var 中以及其他文本按下按钮以显示模态时显示..我尝试过 async:false 但它不起作用.. :( 这是我的功能

     getVersion: function() {
     $.ajax({
      dataType: 'json',
      type: 'GET',
      url: this.options.url.generalsUrl + '/getAppVersion',
      cache: false,
      async: false,
      success: function(response) {
      alert(response.VERSION);//ok this is for testing
      },
      error: function(jqXHR, exception) {
          alert("There was an error retrieving the version of the application.");
      }
  });

}，

但是在模态按钮功能的其他地方，我想将它粘贴在 var 内容的其他文本中，这是另一个没有显示的功能，因为我不想偷懒..

    var imgAbout = $('#topright-menu ul.menu-divmenu > li > a > img[src$="about.png"]');
    imgAbout.click(function(e) {
        e.preventDefault();
        var modal = (self.modal());      
var content = $('self.getVersion()') + //this line is bad how can i show the response?
              "in the following browsers have been tested: <br>" +
              '<img src="images/ie.png" width="45" height="45"/>Internet Explorer 11.0.9600.17239<br>' +
              '<img src="images/mozilla.png" width="45" height="45"/>Mozilla Firefox 32.0<br>' + 
              '<img src="images/chrome.png" width="45" height="45"/>Google Chrome 37.0.2062.103 m<br>';

        var $div_container = $('<div></div>')
                .addClass('jtable-main-container');

        var $div_title = $('<div></div>').addClass('jtable-title')
                .appendTo($div_container);
        $('<div></div>').addClass('jtable-title-text')
                .text('Information for the application')
                .appendTo($div_title);

        var $table = $('<table></table>').appendTo($div_container);
        var $row = $('<tr></tr>').appendTo($table);
        var $cell = $('<td></td>').html(content).appendTo($row);                   
        $('#jsn-pos-left').hide();
        modal.open({
            content: $div_container                
        });

    });

有什么帮助吗？我相信这是一件容易的事，但对我来说很难.. :(

Answer 1

您应该为此使用 jQuery Deferred。

 getVersion: function() {
   var d = new $.Deferred();
   $.ajax({
     dataType: 'json',
     type: 'GET',
     url: this.options.url.generalsUrl + '/getAppVersion',
     cache: false,
     async: false,
     success: function(response) {
        d.resolve(response.VERSION);
        alert(response.VERSION);//ok this is for testing
     },
     error: function(jqXHR, exception) {
         alert("There was an error retrieving the version of the application.");
     }
   });
   return d.promise();
 }. ...

然后你可以简单地调用 var version = yourObj.getVersion();

Answer 2

在对话框中为 ajax 结果创建一个占位符。并在加载时将ajax请求的结果放到这个占位符中。

....

 success: function(response) {
  $(".ajaxResultPlaceholder").html(response);
  },
  error: function(jqXHR, exception) {
      alert("There was an error retrieving the version of the application.");
  }

....

var content = '<span class="ajaxResultPlaceholder"><img src="/loader.png" /></span>' + //this line is bad how can i show the response?
              "in the following browsers have been tested: <br>" +
              '<img src="images/ie.png" width="45" height="45"/>Internet Explorer 11.0.9600.17239<br>' +
              '<img src="images/mozilla.png" width="45" height="45"/>Mozilla Firefox 32.0<br>' + 
              '<img src="images/chrome.png" width="45" height="45"/>Google Chrome 37.0.2062.103 m<br>';

...

        modal.open({
            content: $div_container                
        });

self.getVersion();

...

Answer 3

你有三个简单的选择，

1. 在页面准备好时加载版本 - 如果此版本不更改，这很好。然后，您可以简单地将其保存在全局变量中，并在为您的模态构建content html 字符串时使用它。

1234563那里的模态。如果 AJAX 回复足够快，这很好。

2. 如果 AJAX 回复速度很慢，并且您希望在单击时立即显示模式，您可以在内容字符串中放置一个占位符，您可以使用 DOM 操作替换该占位符，例如。

   // in the click handler show the modal:
   var content =  "<span class='version'> in the following browsers have..."
   // show modal
   // then call ajax, and in success function fill the placeholder:
   $('.version').text('Version is '+ajax_result)
   

（您可能希望将旋转的“加载”图标作为占位符）

Answer 4

首先非常感谢你！！！ 伊夫塔 张 阿扎德鲁姆 非常感谢您的帮助！！！ 所以只是为了将来使用，以防其他人需要它..我改变了它，我已经在 getVersion 函数中成功放入了模态函数，它就像一个魅力，所以这里是工作代码.. 按钮

      var imgAbout = $('#topright-menu ul.menu-divmenu > li > a > img[src$="about.png"]');
      imgAbout.click(function(e) {
        e.preventDefault();            
        self.getVersion();      
  });

对于getVersion函数，里面有模态函数

      getVersion: function() {      
    var self = this;      
    $.ajax({
        dataType: 'json',
        type: 'GET',
        url: this.options.url.generalsUrl + '/getAppVersion',
        cache: false,
        async: false,
        success: function(response) {            
            var modal = (self.modal());      
            var content = "<span class='version'>" + "The Version of the application is: " + response.VERSION + "<br>" +
            "The application has been tested with the following browsers: " + "<br>" +
            '<img src="../images/browser_icons/ie.png" width="45" height="45"/>Internet Explorer 11.0.9600.17239<br>' +
            '<img src="../images/browser_icons/mozilla.png" width="45" height="45"/>Mozilla Firefox 32.0<br>' + 
            '<img src="../images/browser_icons/chrome.png" width="45" height="45"/>Google Chrome 37.0.2062.103 m<br>';
            var $div_container = $('<div></div>')
            .addClass('jtable-main-container');                                
            var $div_title = $('<div></div>').addClass('jtable-title')
            .appendTo($div_container);
            $('<div></div>').addClass('jtable-title-text')
            .text('Πληροφορίες για την εφαρμογή')
            .appendTo($div_title);
            var $table = $('<table></table>').appendTo($div_container);
            var $row = $('<tr></tr>').appendTo($table);
            var $cell = $('<td></td>').html(content).appendTo($row);                   
            $('#jsn-pos-left').hide();
            modal.open({
                content: $div_container                
            });
        },
        error: function(jqXHR, exception) {
            alert("There was an error retrieving the version of the application.");
        }
    });
},      

再次感谢大家的帮助。问题已解决！主题已关闭。