web-dev-qa-db-ja.com

getJSON同期

目標:データベースに何かを追加するたびに(submit_to_db.phpへの$ .ajaxの後に)データベースからデータを取得し、main.phpを更新する(draw_polygonでより明確に)ことです。

したがって、基本的には、データベースに保存される配列を受け取るために別のphpをajaxで呼び出すmain.phpがあり、配列を返すためにjsonが別のphpを呼び出すことでmain.phpが使用されます。

$(document).ready(function() {
    get_from_db();
    $('#button_cancel').click(function(){
       $.ajax({
          url: 'submit_to_db.php',
          type: 'POST',
          data: {list_item: selected_from_list},

          success: function(result){
             ...
             get_from_db();
          }
       });
    });
    function get_from_db(){
         $.getJSON('get_from_db.php', function(data) {
             ...
             draw_polygon(data);
         });
    }
 });

私の場合、実際にデータベースからデータを取得するためのgetJSONget_from_db関数呼び出しで、draw_polygonに使用されるデータを使用しました。しかし、それはどのように行われるべきですか?私は完全な初心者であり、getJSONとajaxも試してみるのは初めてです。私の質問:非同期は実際にどのように機能しますか?関数get_from_dbgetJSONで呼び出す代わりに、これに対する別の回避策はありますか(同期ではありませんか?それは、ページ内にないときにページを更新しない理由です)関数?)常に-$.ajaxasync: falseのように(私はそれを動作させることができませんでした)。私のアプローチは機能していますが、他のもっと良い方法があると思いました。方法を学びたいです。前もって感謝します。意味を成していると思います。

より明確にするために、私が達成したいことは次のとおりです。

  1. ページの@start、データベースからデータを取得(現在getJSONを介して)
  2. canvasを使用してdataでペイントまたは描画します
  3. 完了ボタンをクリックすると、データベースが更新されます
  4. 自動的にデータを再度取得して、キャンバスの変更を再描画したい。
35
Fred

非同期的には、リクエストがバックグラウンドで実行されていることを意味し、応答を受け取ったときに関数をコールバックします。この方法は、結果を取得したいが、リクエスト内でアプリの使用を許可する場合に最適です。直接応答したい場合は、同期要求を見てください。この要求は、応答を受け取るまでスクリプトの実行を一時停止し、応答が受信されるまでユーザーは何もできません。次の方法で切り替えることができます。

async: false,

たとえば、次のとおりです。

$.ajax({
    url: "myurl",
    async: false,
    ...
})
21
tobspr

$ .getJSON()はajax構成を使用するため、グローバルajax構成を設定するだけです。

// Set the global configs to synchronous 
$.ajaxSetup({
    async: false
});

// Your $.getJSON() request is now synchronous...

// Set the global configs back to asynchronous 
$.ajaxSetup({
    async: true
});
47
cchristelis

$ .getJSON()は、ドキュメントで次の短縮版であると述べているように、構成を受け入れません。

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

そのため、それに関してリクエストを書き換えるだけで、期待どおりにasync:falseが機能します。

19
Robert Moskal

$.getJSON()$.ajax()の略記法で、同期するように構成できます( jQuery.getJSON および JQuery.ajax を参照) :

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  async: false, 
  success: function(data) {
      ...
      draw_polygon(data);
  }
});

ただし、同期呼び出しを避けるように​​してくださいjQuery doc(async propを参照) からの引用:

クロスドメインリクエストとdataType: "jsonp"リクエストは、同期操作をサポートしていません。同期リクエストは一時的にブラウザをロックし、リクエストがアクティブな間はアクションを無効にすることに注意してください。

次のようにjQuery Deferreds を試してください。

var jqxhr = $.getJSON(url);
jqxhr.done(function(data) {
    ...
    draw_polygon(data);
});
10
R. Oosterholt