2017-09-02 13 views
0

にスローされているものとは異なるオブジェクトを受け取り、行う。しかし、エンドユーザーが無効な入力を入力した場合、サーバー側がスローバックするオブジェクトは、最終的に取得するオブジェクトとは異なります。私は小さすぎる穴の幅に入ってみました。私は、サーバー側でロガーを検査するとき、私はこの正しい出力を見ました:失敗ハンドラは、私のアプリは、このサーバ側の関数にフォームデータを送信し送信し、サーバ側

what the client side SHOULD be getting....

しかし、デベロッパーコンソールで、私は以下を参照してください

what the client side ACTUALLY gets....

にデータを通信するコードサーバは次のようになります。

function updateURL(url) 
    { 
     // activate button 
     $('#input[type="submit"]').prop('disabled', ''); 
     // change href of #spreadsheetLink 
     $('#spreadsheetLink').attr('href', url); 
     // unhide the link's container if hidden 
     if ($('#spreadsheetLink').parent().hasClass('hidden')) $('#spreadsheetLink').parent().removeClass('hidden'); 
     // hide the 'Loading...' element 
     if (!$('#loading').hasClass('hidden')) $('#loading').addClass('hidden'); 
    } 

    function emailLink() 
    { 
     google.script.run.withSuccessHandler(function() { 
      $('#emailLink').next().text('E-mail message has been sent!'); 
      $('#emailLink').prop('disabled', 'disabled'); 
     }).emailLink($('#spreadsheetLink').attr('href')); 
    } 

    function handleFails(failData) 
    { 
     var DEBUG = true; 
     if (DEBUG) console.log('failData == ' + JSON.stringify(failData, null, '\t')); 
     // hide 'Loading...' element 
     if (!$('#loading').hasClass('hidden')) $('#loading').addClass('hidden'); 
     // for now, let's ignore any Errors/TypeErrors. 
     if ((!failData instanceof Error) && (!failData instanceof TypeError)) 
     { 
      // for now, if there were any errors with any of the fields, simply mark them as .invalid 
      if ((failData.potholeWidth) && (failData.potholeWidth.messages.length > 0)) 
      { 
       if (!$('#potholeWidth').hasClass('invalid')) $('#potholeWidth').addClass('invalid'); 
      } 
      if ((failData.intervalSize) && (failData.intervalSize.messages.length > 0)) 
      { 
       if (!$('#intervalSize').hasClass('invalid')) $('#intervalSize').addClass('invalid'); 
      } 
     } 
    } 

    function submitFormData() 
    { 
     // hide spreadsheetLink container if not already done, and clear its <span> element if not already clear 
     var spreadsheetLinkContainer = $('#spreadsheetLink').parent(), 
      spanElement = $('spreadsheetLinkContainer').find('span'); 
     if (!$(spreadsheetLinkContainer).hasClass('hidden')) $(spreadsheetLinkContainer).addClass('hidden'); 
     if ($(spanElement).text() != '') $(spanElement).text(''); 
     // get all data 
     var potholeWidth = parseNumberField('potholeWidth'), 
      intervalSize = parseNumberField('intervalSize') || defaults.get('intervalSize'), 
      concaveEdges = $('input[name="concaveEdges"]').filter(function() { return $(this).prop('checked'); }).next().text() === 'Yes', 
      spreadsheetName = parseField('spreadsheetName') || defaults.get('spreadsheetName'); 
     // make button inactive 
     if (($(this).prop('tagName')) && ($(this).prop('tagName').toLowerCase() == 'input')) $(this).prop('disabled', 'disabled'); 
     // show "Loading..." element 
     if ($('#loading').hasClass('hidden')) $('#loading').removeClass('hidden'); 
     // submit this data to the server 
     google.script.run.withSuccessHandler(updateURL).withFailureHandler(handleFails).processFormData(JSON.stringify({ 
      potholeWidth: potholeWidth, 
      intervalSize: intervalSize, 
      concaveEdges: concaveEdges, 
      spreadsheet : spreadsheetName 
     })); 
    } 

このようなHTMLは、次のようになります。

<form> 
     Place straightedge/yardstick along width of pothole such that it points at the corners, <a class="showImage">like this</a> 
     <span class="row"> 
      <label class="firstColumn seventeenTwentieths">Pothole width (in inches): </label> 
      <input type="text" class="secondColumn tenth numberField" id="potholeWidth" required /> 
     </span> 
     <span class="rowTight"> 
      <label class="firstColumn seventeenTwentieths">Interval size (in inches, default 1 inch): </label> 
      <input type="text" class="secondColumn tenth numberField" id="intervalSize" value="1" /> 
     </span> 
     <div class="rowTight"> 
      <label class="firstColumn">Do any of the edges intersect the straightedge/yardstick other than at the corners?</label> 
      <div class="secondColumn"> 
      <span> 
       <input type="radio" name="concaveEdges" id="yesConcaveEdges" /> 
       <label for="yesConcaveEdges">Yes</label> 
      </span> 
      <br> 
      <span> 
       <input type="radio" name="concaveEdges" id="noConcaveEdges" checked /> 
       <label for="noConcaveEdges">No</label> 
      </span> 
      </div> 
     </div> 
     <span class="rowTight"> 
      <label class="firstColumn half">Spreadsheet name: </label> 
      <input type="text" class="secondColumn nineTwentieths" id="spreadsheetName"/> 
     </span> 
     <span class="center row"> 
      <button class="center" id="clearForm">Clear</button> 
      <input type="submit" class="center action" value="Create spreadsheet" /> 
     </span> 
     </form> 
     <span id="loading" class="row center fullWidth hidden"> 
     Loading... 
     </span> 
     <span class="row center fullWidth hidden"> 
     <a href="#" id="spreadsheetLink">Here is your spreadsheet</a> 
     <button id="emailLink">E-mail me the link</button> 
     <span></span> 
     </span> 

クライアントが実際に取得するオブジェクトは何ですか?また、サーバーが実際にスローするオブジェクトを取得する方法を確認する方法はありますか?

+0

サーバーにデータを送信するために、私は 'JSON.stringify()'を使いました。私はそれをサーバーからエラーをスローするために使用する必要があるとは思わない。 –

答えて

0

私はそれを修正しました。

は私がやったことcode.gsで

代わりに、単純にthrow errorObject;

、私は私は、JavaScript.htmlでthrow JSON.stringify(errorObject);

handleFails()

ファイルと文字列を変換してサーバーサイドのスローベイckをオブジェクト(failData = JSON.parse(failData))に挿入して使用します。それは正しく出力され、すべてが順調です。

私は

を学んだサーバーがデータを与えまたは受信されるかどれ時間は、それMUSTは、文字列の形であっても! (JSON.stringify()を使用してそのデータを文字列にしてください)