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

2

要素を挿入するときは、DOM を 1 回だけヒットするようにしてください。送信ボタンが必要な場合:

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 に答える