将ajax响应保存到jquery变量

时间:2014-09-15 14:07:50

标签: jquery ajax

简单的问题, 我知道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                
        });

    });

任何帮助人员?我相信这很简单,但对我来说很难.. :(

4 个答案:

答案 0 :(得分:0)

你应该使用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();

答案 1 :(得分:0)

您有三个简单的选择,

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

  2. 如果要在模式打开时加载版本,则可以在click事件中请求AJAX,并在AJAX回复处理程序(success函数中)构建content html字符串并在那里显示模态。如果AJAX回复足够快,这很好。

  3. 如果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)
    
  4. (您可能希望将旋转&#39;加载&#39;图标作为占位符)

答案 2 :(得分:0)

在对话框中为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();

...

答案 3 :(得分:0)

首先非常感谢你! 的 Iftah 张志贤 Azadrum 对于帮助真的很感激!!! 所以只是为了将来使用以防其他人需要它..我改变它,我已经把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.");
        }
    });
},      

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