谷歌飛鏢形式的工作示例

我目前正試圖創建一個簡單的形式在飛鏢與簡單的用戶名和電子郵件註冊的目的。谷歌飛鏢形式的工作示例

我找不到一個完整的工作我可以測試的例子。如果有人可以解釋如何將下面的jQuery代碼轉換爲Dart，我認爲這將大大地澄清事情。

另外我見過DAR的FormData類，但沒有例子。任何幫助表示讚賞。

$("#submit").click(function() { 
    $.post($("#myForm").attr("action"), 
      $("#myForm :input").serializeArray(), 
      function(info) { 

       $("#responseDiv").empty(); 
       $("#responseDiv").html(info); 
      }); 

    $("#myForm").submit(function() { 
     return false;  
    }); 
});

來源

2012-12-06 basheps

先導入兩個庫：

import 'dart:html'; 
import 'dart:convert';

然後我們定義一個串行功能：

serializeForm(FormElement form) { 
    var data = {}; 

    // Build data object. 
    form.querySelectorAll('input,select').forEach((Element el) { 
    if (el is InputElement) 
     data[el.name] = el.value; 
    }); 

    return data; 
}

它只是一個序列化形式進入數據Map。我不知道Dart形式的串行器，可能有一些用於該目的的包。請注意，上述示例僅處理輸入。

接下來我們假設以下HTML：

<form id="myForm" action="/bar"> 
    <label>Foo:</label> 
    <input type="text" name="foo" value="bar" /> 
</form> 

<button id="mySubmit">Send it</button>

和最後我們的飛鏢客戶端代碼的形式處理：

main() { 
    FormElement form = querySelector('#myForm'); 
    ButtonElement button = querySelector('#mySubmit'); 

    button.onClick.listen((e) { 
    var req = new HttpRequest(); 

    req.onReadyStateChange.listen((ProgressEvent e) { 
     if (req.readyState == HttpRequest.DONE) { 
     print('Data submitted!'); 
     } 
    }); 

    req.open('POST', form.action); 
    req.send(JSON.encode(serializeForm(form))); 
    }); 
}

這應該讓你開始。

您可能還想爲表單使用Polymer。

來源

2012-12-06 16:42:57

運行開始。謝謝你這樣詳細的解釋。 – basheps

我試過使用它，但似乎很多事情已經改變。例如，'dart：json'現在以不同的方式包括在內：'dart：convert'和代碼'form.elements.forEach（（Element el）{el是InputElement） data [el.name] =我也注意到'query（selector）'現在是'querySelector（選擇器）' – dieortin

@ dieortin我更新了我的答案。 –

關閉上面的例子。你也可以做這樣的事情。

main(){ 
    var form = new FormData(query('#myForm'); 
    var button = query('#mySubmit'); 

    button.onClick.listen((e){ 
     var request = new HttpRequest(); 
     request.on.readyStateChange.add((HttpRequestProgressEvent e) { 
      if (request.readyState == HttpRequest.DONE) { 
      print('Data submitted!'); 
      } 
      }); 
      request.open('POST','http://localhost/form_info.php'); 
      request.send(form); 
     }); 
     }

來源

2013-06-13 20:42:41 thaDanzar

谷歌飛鏢形式的工作示例

回答

相關問題