加载ajax而不单击按钮

Question

我有一个jquery，它通过单击一个按钮进行AJAX调用，但是我希望它们不按下按钮，它在加载页面时应该能工作。

这是按钮

<div>
    <form method="post" action="">
        <button value="cars" type="submit" id="submitCars">Get Cars</button>
    </form>
</div>

通过ajax编写按钮的脚本

 <script>
 <![CDATA[
$(document).ready(function(){
    $('#submitCars').click( function(event) {
        event.preventDefault();
      var button = $(this).val();
      $.ajax({
        url: 'search-facet-form',
        data: 'button=' + $(this).val(),
        dataType: 'json',
        success: function(data)
        {
          $('#wines').html('');

          if (button == 'cars') {
            for (var i in data.facet_counts.facet_fields.manufacturer) {
              if (!$.isNumeric(data.facet_counts.facet_fields.manufacturer[i])) {
                var imagen = 'img/logo-cars/' + data.facet_counts.facet_fields.manufacturer[i] + '-logo-small.gif';
                d=document.createElement('img');
                $(d).attr('src', imagen);
              }
              $('#wines').append(d);
            }
          }
        }
      });
      return false;
    });
  });
]]>
 </script>

HTML中的DIV：

<div id="wines" class="span-7 colborder">
</div>

Javascript将在这里打印数据。谢谢。

Answer 1

只需删除对click的调用

$(document).ready(function(){
  var button = $('#submitCars').val(); //You may not even need this, you could just hard code this value

  $.ajax({
    url: 'search-facet-form',
    data: 'button=' + button ,
    dataType: 'json',
    success: function(data)
    {
      $('#wines').html('');

      if (button == 'cars') {
        for (var i in data.facet_counts.facet_fields.manufacturer) {
          if (!$.isNumeric(data.facet_counts.facet_fields.manufacturer[i])) {
            var imagen = 'img/logo-cars/' + data.facet_counts.facet_fields.manufacturer[i] + '-logo-small.gif';
            d=document.createElement('img');
            $(d).attr('src', imagen);
          }
          $('#wines').append(d);
        }
      }
    }
  });
});

Answer 2

插入元素时，尝试只点击DOM一次。如果您需要提交按钮，那么：

function loadCars() {
    $.ajax({
        url: 'search-facet-form',
        data: 'button=' + $(this).val(),
        dataType: 'json',
        success: function (data) {
            $('#wines').html('');
            var mycars = '';
            for (var i in data.facet_counts.facet_fields.manufacturer) {
                if (!$.isNumeric(data.facet_counts.facet_fields.manufacturer[i])) {
                    var imagen = 'img/logo-cars/' + data.facet_counts.facet_fields.manufacturer[i] + '-logo-small.gif';
                    mycars += '<img src="' + imgen + '"/>';
                }
            }
            $(mycars).appendTo('#wines');// hit the DOM only once with images
        }
    });
}
$(document).ready(function () {
    loadCars();
    $('#submitCars').click(function (event) {
        event.preventDefault();
        loadCars();
        return false;
    });
});

如果不需要提交按钮，那么简化该部分并删除submit按钮：

$(document).ready(function () {
    loadCars();
});

Answer 3

删除单击处理程序并将$(this).val()替换为$('#submitCars').val();

$(document).ready(function () {
    var button = $('#submitCars').val();
    $.ajax({
        url: 'search-facet-form',
        data: 'button=' + $('#submitCars').val(),
        dataType: 'json',
        success: function (data) {
            $('#wines').html('');

            if (button == 'cars') {
                for (var i in data.facet_counts.facet_fields.manufacturer) {
                    if (!$.isNumeric(data.facet_counts.facet_fields.manufacturer[i])) {
                        var imagen = 'img/logo-cars/' + data.facet_counts.facet_fields.manufacturer[i] + '-logo-small.gif';
                        d = document.createElement('img');
                        $(d).attr('src', imagen);
                    }
                    $('#wines').append(d);
                }
            }
        }
    });
});