使用JQuery實作表單的非同步提交與檔案上傳功能-js教程-PHP中文網

首頁

web前端

js教程

使用JQuery實作表單的非同步提交與檔案上傳功能

巴扎黑

Aug 22, 2017 pm 04:59 PM

jquery 非同步表單

本文實例講述了JQuery非同步提交表單與檔案上傳功能。分享給大家供大家參考，具體如下：

Jquery.form.js是一個可以非同步提交表單及上傳檔案的外掛程式。

範例如下：

#index.html

<!DOCTYPE html>
<html>
<head> 
  <title></title> 
  <meta charset="utf-8" /> 
  <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script> 
  <script type="text/javascript" language="javascript" src="js/jquery.form.js"></script> 
  < script type = "text/javascript"language = "javascript" > 
  $(function() { //异步提交表单    
    $("#ajaxSubmit").on("click",function(){      
      console.log($(this));      
        $("#formToUpdate").ajaxSubmit({     
             type:&#39;post&#39;,          
             url:&#39;p.php&#39;,          
             success:function(data){            
             console.log(data);          },          
             error:function(XmlHttpRequest,textStatus,errorThrown){          
               console.log(XmlHttpRequest);            
               console.log(textStatus);            
               console.log(errorThrown);     
                    }    
                   });   
                      }); 
                         });  
                         </script>
  </head>
 <body>
  <form id="formToUpdate" method="post" action="#" enctype="multipart/form-data"> 
   <input type="text" name="t1" />
   <br /> 
   <input type="file" name="f1" />
   <br /> 
   <input id="ajaxSubmit" type="button" value="异步提交" />
  </form> 
 </body>
</html>

登入後複製

p.php

<? php
/** * Created by JetBrains PhpStorm. * User: smeoi * To change this template use File | Settings | File Templates. */
echo &#39;<pre class="brush:php;toolbar:false">&#39;;
print_r($_POST);
echo &#39;

'; echo '

&#39;;
print_r($_FILES);
echo &#39;

登入後複製

效果圖：

#UaHHTML5中文學習網- HTML5先行者學習網

以上是使用JQuery實作表單的非同步提交與檔案上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1277

C# 教程

1257

Related knowledge

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

Python asyncio 進階指南：從初學者到專家 Mar 04, 2024 am 09:43 AM

並發和非同步編程並發編程處理同時執行的多個任務，非同步編程是一種並發編程，其中任務不會阻塞線程。 asyncio是python中用於非同步程式設計的函式庫，它允許程式在不阻塞主執行緒的情況下執行I/O操作。事件循環asyncio的核心是事件循環，它監控I/O事件並調度相應的任務。當一個協程準備好時，事件循環會執行它，直到它等待I/O操作。然後，它會暫停協程並繼續執行其他協程。協程協程是可暫停和恢復執行的函數。 asyncdef關鍵字用於建立協程。協程使用await關鍵字等待I/O作業完成。 asyncio的基礎以下

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

Laravel表單類別使用技巧：提高效率的方法 Mar 11, 2024 pm 12:51 PM

在編寫網站或應用程式時，表單是不可或缺的一部分。 Laravel作為一個流行的PHP框架，提供了豐富而強大的表單類，使得表單處理變得更加簡單和高效。本文將介紹一些Laravel表單類別的使用技巧，幫助你提升開發效率。下面透過具體的程式碼範例來詳細講解。建立表單要在Laravel中建立表單，首先需要在檢視中編寫對應的HTML表單。在處理表單時，可以使用Laravel