Javascript関数はHTMLブロックを更新していません - それは必要ですか？

私は、AJAX呼び出しを行い、結果をブロックに更新するJavaScript関数（同じページ上）を呼び出すボタンを含むWebページを生成するCSHTMLページを作成しています。それは次のようになります。Javascript関数はHTMLブロックを更新していません - それは必要ですか？

function getItems() 
{ 
    $(result_div).html("<b>Processing...</b>");  
    var resultString = ""; 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("GetItems", "DataHandler.svc")', 
     data: {}, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      resultString = "<b>Items:</b><br />"; 
      var itemNames = data; 
      for (var N in itemNames) { 
       resultString += (itemNames[N] + "<br />"); 
      } 
     }, 
     error: function (HelpRequest, ErrorCode, TheError) { 
      resultString = "Error creating items list:<br />" + TheError; 
     }, 
     async: false 
    }); 
    $(result_div).html(resultString); 
}

私はボタンを押すと、関数が呼び出され、そして最終的には正しいデータが「result_div」ブロックに表示されます。しかし、ブロックは関数が返るまで更新されず、ただちに「処理中...」と表示されるのではありません。

しかし、私はこの代わりにしている場合：それはデータに置き換えされる前に、

function getItems() 
{ 
    var resultString = "<b>Processing...</b>"; 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("GetItems", "DataHandler.svc")', 
     data: {}, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      resultString = "<b>Items:</b><br />"; 
      var itemNames = data; 
      for (var N in itemNames) { 
       resultString += (itemNames[N] + "<br />"); 
      } 
     }, 
     error: function (HelpRequest, ErrorCode, TheError) { 
      resultString = "Error creating items list:<br />" + TheError; 
     }, 
     complete: function (Request, Status) { 
      $(result_div).html(resultString);  
     } 
    }); 
    $(result_div).html(resultString); 
}

が、それはすぐに「...処理」を表示しません。

私は、.html呼び出しがすぐに更新されると仮定して間違っていますか？ページを更新する前に関数が終了するのを待っていますか？

出典

2017-04-25 Don Del Grande

変数 'result_div'にはどのような値がありますか？ – Tushar

最初は？ –

Ajaxは非同期ですが、外部で宣言された変数は内部では未定義です;）' result_div'はdiv/spanなどのコンテナタグでなければなりません – Tushar

人々は私の「問題」を誤解していると感じていますので、私はそれをより明確にしようとします。

マイCSHTMLは次のようになります。で、データが抽出されている間、それが数秒間一時停止し、データが上に現れる、私は「ゲットアイテム」ボタンを押したときに何が起こる

<body> 
    <div id="result_div"> 
    &nbsp; 
    </div> 
    <br /> 
    <button id="button_getItems" onclick="getItems()"> 
    Get Items 
    </button> 
</body> 

<script type="text/javascript"> 
    function getItems() 
    { 
     $(result_div).html("<b>Processing...</b>");  
     var resultString = ""; 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("GetItems", "DataHandler.svc")', 
      data: {}, 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (data) { 
       resultString = "<b>Items:</b><br />"; 
       var itemNames = data; 
       for (var N in itemNames) { 
        resultString += (itemNames[N] + "<br />"); 
       } 
      }, 
      error: function (HelpRequest, ErrorCode, TheError) { 
       resultString = "Error creating items list:<br />" + TheError; 
      } 
      , async: false 
     }); 
     $(result_div).html(resultString); 
    } 
</script>

ボタンの上に画面が表示されます。問題は「データがまったく出現していない」ということではありません。その部分は正常に動作します。

ボタンを押すと、データが取得されて表示される前に「処理中...」と表示されるはずです。

「代替」バージョンのgetItems（）を使用すると、「async：false」が削除され、resultStringが最初に「処理：」に設定され、「完了：」セクションが返されたデータにresult_divブロックを設定するAjax呼び出し
ただし、データの抽出中にユーザーが何もできるようにしたくないので、非同期呼び出しをしたくありません。

出典

2017-04-25 19:26:36

試してみるとうまくいきます。私は 'http：//google.com：81'をURLとして使用してタイムアウトになりました。 'Processing ...'と表示され、 ''エラーを生成しているリスト： ''数秒後に表示されます。 – alfredo

Javascript関数はHTMLブロックを更新していません - それは必要ですか？

答えて

関連する問題