ホームページ ウェブフロントエンド jsチュートリアル Ajax フォーム送信とファイルアップロードのサンプルコード

Ajax フォーム送信とファイルアップロードのサンプルコード

May 14, 2018 pm 03:09 PM
ajax form 書類

少し前にプログラムに取り組んでいたときに、写真をアップロードするためにバックエンド管理のFormフォームを書いていたときに、Formを使用してフォームを送信すると、戻り値を送信するページがジャンプするという小さな問題を発見しました。以下に、Ajax 送信フォームフォームとファイルアップロード

のサンプルコードを共有することで、エディターがそれを分析します。数日前、私はいくつかの小さな問題を発見しました。背景管理ページを書いているときに、写真をアップロードする必要がありました。そこで、非常に普通の Form を使用して Json 文字列と画像ファイルをアップロードしました。

Form フォームは画像をアップロードするため、

タグに enctype = 'multipart/form-data' を追加するだけで済みます。画像 ;

しかし、ここで問題が発生します。フォームを送信すると、戻り値を送信するページが直接ポップアップし、元のページが更新されます。

このようにして、まず非同期 Ajax を使用して次のことを実現します。部分更新;

ナンセンスです。これ以上は説明せずに、コードに直接進みましょう。

まず HTML です。

<form id = "form_insert" method = "post">
<table style = "font-size: 13px; margin: 13px auto;"> 
<tr>
<td style = "text-align: right;">类型</td>
<td>:  <input id = "acttype" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">名称</td>
<td>:  <input id = "actname" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">开始时间</td>
<td>:  <input id = "actstarttime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">结束时间</td>
<td>:  <input id = "actendtime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">省</td>
<td>:  <input id ="mem_Province" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style="text-align: right;">市</td>
<td>:  <input id = "mem_City" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan = "2" style = "height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">门店</td>
<td>:  <input id = "mem_Shop" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td>
</tr>
<tr><td colspan="2" style="height: 13px"></td>
</tr>
<tr>
<td style = "text-align: right;">具体地址</td>
<td>:  <input id = "actadd" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td>
</tr>
</table>
</form>
<form id = "form_sub" style = "font-size: 13px;">
<table style="font-size: 13px; margin: 13px auto;">
<tr>
<td style = "text-align: right;">上传图片</td>
<td>:  <input class = "easyui-filebox" name = &#39;photo&#39; style = "width:153px" data-options = "required:true,prompt:&#39;选择上传图片&#39;,buttonText:&#39; 选 择 &#39;"></td>
<td><input type = &#39;text&#39; id = "Item" name = &#39;item&#39; style = "display:none;"></td>
</tr>
</table>
</form>
<p style = "text-align:right; padding:2px 5px;">
<a id = "sub" class = "easyui-linkbutton" data-options = "iconCls:&#39;icon-ok&#39;" href = "javascript:void(0)">
保存
</a>    
<a class = "easyui-linkbutton" data-options = "iconCls:&#39;icon-quxiao&#39;" href = "javascript:void(0)" onclick = "window_open($(&#39;#insert_form&#39;), &#39;close&#39;)">
取消
</a>    
</p>
ログイン後にコピー

上記は HTML コードです。コピーしやすいように、CSS はタグ内に直接記述されています。

多くの友人が、なぜ 2 つのフォームを作成するのか尋ねたいと考えています。

これは、バックグラウンドでデータを受信する必要に応じて、情報が

文字列に変換されるためです。それを 2 番目のフォームに入力します。2 番目のフォームの タグの style="display:none" が隠しタグであることに気付きました。最初のフォームを js 経由で文字列に変換し、それをタグ内に隠します。

この方法で、Ajax 経由で 2 番目のフォーム フォームを送信できます:

$( &#39;#sub&#39; ).click( function () {
  var actTimeStart1 = $ (&#39;#actstarttime&#39;) . datebox (&#39;getValue&#39;);
  var actTimeStart = changeDateToLong(actTimeStart1);
  var actTimeEnd1 = $(&#39;#actendtime&#39;).datebox(&#39;getValue&#39;);
  var actTimeEnd = changeDateToLong(actTimeEnd1);
  if(actTimeStart != &#39;&#39; && actTimeEnd != &#39;&#39; && (actTimeStart - actTimeEnd > 0)){
    $.messager.alert(&#39;警告&#39;,&#39;结束时间不能小于开始时间!&#39;,&#39;error&#39;);
    return false;
  }
  else{
    if ($(&#39;#form_insert&#39;).form(&#39;validate&#39;)) {
      var actType = document.getElementById("acttype").value;
      var actName = document.getElementById("actname").value;
      var actArea = document.getElementById("actadd").value;
      var actTimeStart1 = $(&#39;#actstarttime&#39;).datebox(&#39;getValue&#39;);
      var actTimeStart = changeDateToLong(actTimeStart1);
      var actTimeEnd1 = $(&#39;#actendtime&#39;).datebox(&#39;getValue&#39;);
      var actTimeEnd = changeDateToLong(actTimeEnd1);
      var t2 = $(&#39;#mem_Shop&#39;).combobox(&#39;getValue&#39;);
      var jsonObj = {actType:actType,actName:actName,actTimeStart:actTimeStart,actTimeEnd:actTimeEnd,actArea:actArea,t2:t2};
      var activityMemberJson = JSON.stringify(jsonObj);
      document.getElementById("Item").value=activityMemberJson;
      var form = new FormData(document.getElementById("form_sub"));
      $.ajax({
        url : ../activity/actionActivityInsert&#39;, //http://www.cnblogs.com/jayxxxxxxx/
        type : "post",
        data : form, //第二个Form表单的内容
        processData : false,
        contentType : false,
        error : function(request) {
        },
        success : function(data) {
          $(&#39;#box&#39;).datagrid(&#39;reload&#39;);
        }
      });
      window_open($(&#39;#insert_form&#39;), &#39;close&#39;);
    }else {
      $.messager.alert(&#39;警告&#39; , &#39;信息不完整!&#39; , &#39;error&#39;);
    }
  }
});
ログイン後にコピー
正直に言うと、私が FormData メソッドを使用していることは誰もが見ていました。 、これは html5 で非常に簡単に使用できます。 アップロード 画像に対して enctype = 'multipart/form-data' を記述する必要はありません

上記は、エディター I が紹介した Ajax フォームの送信とファイルのアップロードのサンプル コードです。皆さんのお役に立てれば幸いです!

関連する推奨事項:

html5 の FormData オブジェクトを使用して、Ajax フォーム経由でファイル データを非同期に送信します

JQuery を使用して、PHP の AJAX フォーム送信インスタンスを作成します

Ajax フォーム検証インスタンスを実装します

以上がAjax フォーム送信とファイルアップロードのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Tmp形式のファイルは削除できますか? Tmp形式のファイルは削除できますか? Feb 24, 2024 pm 04:33 PM

tmp 形式ファイルは、通常、コンピュータ システムまたはプログラムの実行中に生成される一時ファイル形式です。これらのファイルの目的は、プログラムを適切に実行したり、パフォーマンスを向上させるために一時データを保存することです。プログラムの実行が完了するか、コンピュータが再起動されると、多くの場合、これらの tmp ファイルは必要なくなります。したがって、Tmp 形式のファイルは基本的に削除可能です。さらに、これらの tmp ファイルを削除すると、ハード ディスクの空き容量が確保され、コンピュータが正常に動作するようになります。ただし、Tmp 形式のファイルを削除する前に、次のことを行う必要があります。

Quark Cloud Disk から Baidu Cloud Disk にファイルを転送するにはどうすればよいですか? Quark Cloud Disk から Baidu Cloud Disk にファイルを転送するにはどうすればよいですか? Mar 14, 2024 pm 02:07 PM

Quark Netdisk と Baidu Netdisk は現在、ファイルの保存に最も一般的に使用されている Netdisk ソフトウェアです。Quark Netdisk 内のファイルを Baidu Netdisk に保存したい場合は、どうすればよいですか?今回は、Quark Network Disk コンピュータから Baidu Network Disk にファイルを転送するためのチュートリアル手順を編集者がまとめたので、その操作方法を見てみましょう。 QuarkネットワークディスクファイルをBaiduネットワークディスクに保存するにはどうすればよいですか? Quark Network Disk から Baidu Network Disk にファイルを転送するには、まず Quark Network Disk から必要なファイルをダウンロードし、次に Baidu Network Disk クライアントでターゲット フォルダーを選択して開きます。次に、Quark Cloud Disk からダウンロードしたファイルを Baidu Cloud Disk クライアントによって開かれたフォルダーにドラッグ アンド ドロップするか、アップロード機能を使用してファイルを Baidu Cloud Disk に追加します。アップロードが完了したら、Baidu Cloud Disk にファイルが正常に転送されたかどうかを必ず確認してください。それでおしまい

0x80004005 エラー コードが表示された場合の対処方法 エディターは、0x80004005 エラー コードを解決する方法を説明します。 0x80004005 エラー コードが表示された場合の対処方法 エディターは、0x80004005 エラー コードを解決する方法を説明します。 Mar 21, 2024 pm 09:17 PM

パソコン上のフォルダーを削除または解凍するときに、「エラー 0x80004005: 不明なエラー」というダイアログ ボックスが表示されることがあります。この状況はどう解決すればよいでしょうか?エラー コード 0x80004005 が表示される理由は実際にはたくさんありますが、そのほとんどはウイルスによって引き起こされます。DLL を再登録して問題を解決できます。以下では、エディターがエラー コード 0x80004005 の処理体験を説明します。 。一部のユーザーは、コンピュータの使用時にエラー コード 0X80004005 を表示されます。0x80004005 エラーは主に、コンピュータが特定のダイナミック リンク ライブラリ ファイルを正しく登録していないこと、またはファイアウォールがコンピュータとインターネット間の HTTPS 接続を許可していないことが原因で発生します。それでどうですか

hiberfil.sys ファイルとは何ですか? hiberfil.sysは削除できますか? hiberfil.sys ファイルとは何ですか? hiberfil.sysは削除できますか? Mar 15, 2024 am 09:49 AM

最近、多くのネチズンが編集者に「hiberfil.sys ファイルとは何ですか?」と尋ねました。 hiberfil.sys は C ドライブのスペースを多く消費し、削除される可能性がありますか?エディターは、hiberfil.sys ファイルを削除できることを通知します。以下で詳細を見てみましょう。 hiberfil.sys は Windows システムの隠しファイルであり、システム休止状態ファイルでもあります。通常、C ドライブのルート ディレクトリに保存され、そのサイズはシステムに搭載されているメモリのサイズと同等です。このファイルはコンピュータが休止状態になっているときに使用され、リカバリ中に以前の状態にすばやく復元できるように、現在のシステムのメモリ データが含まれています。そのサイズはメモリ容量と等しいため、より多くのハードドライブスペースを占有する可能性があります。冬休み

ファイルパスでのスラッシュとバックスラッシュのさまざまな使用法 ファイルパスでのスラッシュとバックスラッシュのさまざまな使用法 Feb 26, 2024 pm 04:36 PM

ファイル パスは、ファイルまたはフォルダーを識別して検索するためにオペレーティング システムによって使用される文字列です。ファイル パスには、パスを区切る 2 つの一般的な記号、つまりスラッシュ (/) とバックスラッシュ () があります。これら 2 つのシンボルは、オペレーティング システムごとに異なる用途と意味を持ちます。スラッシュ (/) は、Unix および Linux システムで一般的に使用されるパス区切り文字です。これらのシステムでは、ファイル パスはルート ディレクトリ (/) から始まり、各ディレクトリ間はスラッシュで区切られます。たとえば、パス /home/user/Document

Linuxシステムのログ閲覧コマンドを詳しく解説! Linuxシステムのログ閲覧コマンドを詳しく解説! Mar 06, 2024 pm 03:55 PM

Linux システムでは、次のコマンドを使用してログ ファイルの内容を表示できます。 tail コマンド: tail コマンドは、ログ ファイルの末尾の内容を表示するために使用されます。最新のログ情報を表示するための一般的なコマンドです。 tail [オプション] [ファイル名] 一般的に使用されるオプションは次のとおりです。 -n: 表示する行数を指定します。デフォルトは 10 行です。 -f: ファイルの内容をリアルタイムで監視し、ファイルが更新されたときに新しい内容を自動的に表示します。例: tail-n20logfile.txt#logfile.txt ファイルの最後の 20 行を表示 tail-flogfile.txt#logfile.txt ファイルの更新された内容をリアルタイムで監視 head コマンド: head コマンドは先頭を表示するために使用されます。ログファイルの

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

MySQLにおける.ibdファイルの役割と注意事項について詳しく解説 MySQLにおける.ibdファイルの役割と注意事項について詳しく解説 Mar 15, 2024 am 08:00 AM

MySQL における .ibd ファイルの役割とそれに関連する注意事項の詳細な説明 MySQL は人気のあるリレーショナル データベース管理システムであり、データベース内のデータは別のファイルに保存されます。このうち、.ibd ファイルは InnoDB ストレージ エンジンのデータ ファイルであり、データとインデックスをテーブルに保存するために使用されます。この記事では、MySQL における .ibd ファイルの役割を詳細に分析し、読者の理解を深めるために関連するコード例を示します。 1. .ibd ファイルの役割: データの保存: .ibd ファイルは InnoDB ストレージです

See all articles