5

Google App Engine では、javascript (または Ajax) を使用してフォームを POST し、ターゲット div を更新したいと考えています。フォームには、転送するフィールドとファイルが多数含まれています。JavaScript 関数は、「Javascript: The Definite Guide」ブックからコピーされます。2 つの質問があります。

  1. 「form.html」で、postFormData() 関数の「データ」引数を準備して、すべてのフィールドとファイルを渡すにはどうすればよいですか。
  2. 応答 (つまり、「form.html」) がコンテンツ div を更新できるように、コールバック関数を設計する方法は?

ご協力いただきありがとうございます。

base.html:

...
<div id="content">
{% include "form.html" %}
</div>

Image:<br />
<img src="/file?entity_id={{entity.key}}" />
<br />

<script type="text/javascript">
  function postFormData(url, data, callback) {
    if (typeof FormData === "undefined")
      throw new Error("FormData is not implemented");
    var request = new XMLHttpRequest();
    request.open("POST", url);
    request.onreadystatechange = function() {
      if (request.readystate === 4 && callback)
        callback(request);
    };
    var formdata = new FormData();
    for (var name in data) {
      if (!data.hasOwnProperty(name)) continue;
      var value = data[name];
      if (typeof value === "function") continue;
      formdata.append(name, value);
    }
    request.send(formdata);
}
</script>
...

form.html

<form action="/form" method="POST" enctype="multipart/form-data">
  name1: <input type="text" name="name" />{{ name1 }}<br /><br />
  name2: <input type="text" name="name" />{{ name }}<br /><br />
  ...
  file1: <input type="file" name="file" />{{ file1 }}<br /><br />
  file2: <input type="file" name="file" />{{ file2 }}<br /><br />
  ...
         <input type="submit" value="Submit" onclick="return postFormData('/form', howToPrepareData?, whatIsTheCallbackFunction?)" />
</form>
4

3 に答える 3

1

ここで簡単な画像をアップロードします：

HTML

<form action="/form/index.php?name=" class="imageform" method="POST" enctype="multipart/form-data">
 name: <input type="text" name="name" class="name" /><br /><br />
 file: <input type="file" name="file" class="file"/><br /><br />
        <input type="submit" value="Submit" class="submit" />
</form>
<div id="callback">
</div>

Jクエリ

$(document).ready(function() 
{ 
$('.submit').on('click', function() 
{
if($(".name").val()==""){
$(".name").val("Enter Name Here")
}
else { 
var s = $(".name").val();
var n = $(".imageform").attr("action");
$(".imageform").attr("action", function() {
return s+n;
}
$("#callback").html('Uploading.....');
$(".imageform").ajaxForm(
{
target: '#callback'
}).submit();
}
});
});

このリンクも頭に含めてください：

<script type="text/javascript" src="http://demos.9lessons.info/ajaximageupload/scripts/jquery.form.js"></script>

ねえ、php ファイルでエコーされるすべてのテキストは #callback に表示されます。したがって、画像をプレビューしたい場合は、html をエコーし​​、その action=/form/index.php?name= を削除しないでください。また、php ファイル タイプ $name=$_GET['name']; も削除しないでください。

于 2012-12-13T15:58:53.273 に答える
1

フォーム POST を実行すると (ユーザーが送信ボタンをクリックするか、JS 経由で呼び出される)、ブラウザーはウィンドウをリロードし、POST の結果を表示します。これは明らかにあなたが望むものではありません。

回避策は<iframe>、フォーム POST アクションのターゲットである非表示を設定することです。例を次に示します: ajax (jquery なし) で multipart/form-data フォーム コンテンツを送信する方法は?

于 2012-12-13T15:45:32.130 に答える
0

私は次のコードを思いついた。しかし、奇妙なことに、それが機能することもあれば、機能しないこともありました。失敗した場合、Firebugに表示されるエラーメッセージは「ReferenceError：$isnotdefined」でした。誰かが問題が何であるか、そしてこれが正しい解決策であるかどうかを教えてもらえますか？ありがとう。

$(document).ready(function() { 
    // bind 'myForm' and provide a simple callback function 
    $('#myForm').ajaxForm(function(returnData) {
        $('#content').html(returnData)
    }); 
});
于 2012-12-13T15:05:46.990 に答える