0

java スクリプトに関数があり、それを使用して asp.net mvc コントローラーから JSON を取得し、ビューにアイテムを表示します。

<script type="text/javascript" language="javascript">
var k = 0;
var record_count = 0;
var col_count = 3;
var row_count = record_count / col_count;
var str = "<table>";

function itemTemplate() {
 var url = '<%: Url.Content("~/") %>' + "ProductListing/AllProductListing/0";
 $.getJSON(url, function (product) {
      $.each(product.ja, function (index, value) {
       //append rows and column to my table by concat the string of 'str'
      });
 });
  str += '</table>';
  alert(str);
  return (str);
}
$(document).ready(function () {
  alert(itemTemplate());
});
</script>

問題 : 関数内の$(document).ready関数をアラートすると、最初はアラート<table></table>であり、関数内で連結した完全な文字列をアラートし続け$.getJSONます。したがって、関数は JSON を取得する前に返されます。

誰でもそれについて何か考えがありますか？ありがとう。

4

4 に答える 4

1

asyncfalse に設定してみてから、$.getJSON電話をかけます

コード：

jQuery.ajax({async : false});
$.getJSON( ... );

参考：http ://api.jquery.com/jQuery.ajax/

注: jQuery 1.8 以降、async: false の使用は非推奨になりました。

代替ソリューション

<script type="text/javascript" language="javascript">
var k = 0;
var record_count = 0;
var col_count = 3;
var row_count = record_count / col_count;
//var str = "<table>";

function itemTemplate(callback) {
 var url = '<%: Url.Content("~/") %>' + "ProductListing/AllProductListing/0";
 $.getJSON(url, callback);
  //str += '</table>';
  //alert(str);
  //return (str);
}
$(document).ready(function () {
  itemTemplate(function (product) {
      var str = "<table>";
      $.each(product.ja, function (index, value) {
       //append rows and column to my table by concat the string of 'str'
      });
      str += "</table>";
      alert(str);
  });
});
</script>
于 2012-06-28T03:08:44.213 に答える
1

それが ajax の仕組み$.getJSONです。サーバーへの非同期呼び出しが開始されるため、ajax 呼び出しが完了する前に次の行にヒットします。のコールバック内にすべてのテーブル HTML を作成する必要があります。getJSON

function itemTemplate() {
 var url = '<%: Url.Content("~/") %>' + "ProductListing/AllProductListing/0";
 $.getJSON(url, function (product) {
      var html = "<table>";
      $.each(product.ja, function (index, value) {
       //append rows and column to my table by concat the string of 'str'
      });
      html += "</table>";
      // now append html to the DOM
 });
}

サーバーからデータを取得する前に関数が返されるため、サーバーから返されたデータで行うことはすべて、のコールバック内にある必要があります。.getJSON

于 2012-06-28T03:08:48.267 に答える
1

サーバーへの Ajax リクエストは非同期です。これは、クライアント コンピューターが次のように言うことを意味します。そして、あなたが答え（別名、応答）を持ったら、私に言ってください、私はそれに対処します.

だから..そのJQueryコードを配線して、まさにそれを実行しましょう...

<script type="text/javascript">

    $(document).ready(function () {
        // Just call this method, on load. 
        // (yuck, but i'm following your code)...
        itemTemplate(); 
    });

    function itemTemplate() {
        $.ajax({
            url: "/ProductListing/AllProductListing/0",
            type: "GET",
            success: function (data, textStatus, jqXHR) {
                // Handle success. like .. append data, etc.
                //.....
                alert("whatever");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // Handle the error. Don't forget you can access
                // data from the response (aka. the jqXHR)...
                alert(errorThrown);
            }
        });
    }

</script>

ここでの秘訣は、success:とerror:コールバックを接続することでした。

そこに入ると、やりたいことが何でもできます。

そこにブレークポイントを入れて、値を見てみてください:)

参考：jQuery.ajax() doco's .

于 2012-06-28T04:05:04.297 に答える
0

$.getJSONつまり、リクエストを開始するとすぐに関数の呼び出しが完了したと見なされ、JavaScript エンジンは次のコード行に移動しますstr += '</table>'。

内で行われた関数呼び出しの値を返すために呼び出されるalert関数内で関数を呼び出すため、2 つのアラートを受け取ります。2回電話するつもりだったの？itemTemplatealert$(document).readyalert

いずれにせよ、ビルドに関するあなたの意図strは、完成後にテーブルタグを閉じることである$.eachようです...

var k = 0,
    record_count = 0,
    col_count = 3,
    row_count = record_count / col_count,
    str = '<table>';

function itemTemplate() {
    var url = '<%: Url.Content("~/") %>' + "ProductListing/AllProductListing/0";
    $.getJSON(url, function (product) {
        $.each(product.ja, function (index, value) {
            //append rows and column to my table by concat the string of 'str'
        });
        str += '</table>';
        alert(str);
    });
}

$(document).ready(function () {
    itemTemplate();
});
于 2012-06-28T03:56:06.887 に答える