1

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

这是按钮

<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 将在这里打印数据。谢谢。

4

4 回答 4

7

只需删除对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);
        }
      }
    }
  });
});
于 2013-05-21T16:20:35.973 回答
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;
    });
});

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

$(document).ready(function () {
    loadCars();
});
于 2013-05-21T16:34:45.473 回答
1

删除点击处理程序并替换$(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);
                }
            }
        }
    });
});
于 2013-05-21T16:22:16.157 回答
0

只需卸下$('#submitCars').click( function(event)零件，让整个东西漂浮在里面$(document).ready(function()

于 2013-05-21T16:20:24.510 回答