jquery的$.ajax()利用FormData数据类型与php后台交互

本文介绍如何使用HTML5的FormData对象实现文件上传功能,并探讨通过JavaScript获取文件名的方法及与PHP后台交互的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

可能孤陋寡闻,现在才知道MDN的存在:https://developer.mozilla.org/zh-CN/

的MDN全名容易理解他是什么意思:MDN Web Docs

 

好了,自行学习,上一篇讲了jquery的$.ajax()利用json数据类型与php后台交互

那么从MDN上了解到,原来html5中表单数据除了用json数据类型来传给后台,还可以用FormData数据类型来进行传递,而且FormData还加入了文件数据类型的传递。有利于ajax与php后台的文件上传。

 

先来看看MDN是怎么描述FormData的:https://developer.mozilla.org/en-US/docs/Web/API/FormData

 

//构造函数
var formdata = new Formdata();

 

使用FormData的接口主要是键(name)和值(value)

那么好了,构造完FormData了,其实其方法主要是FormData.append();插入元素,添加键和值,但是也需要注意

FormData.append()和FormData.set()的区别。

 

 

// append()两个重载函数
formData.append(name, value);
formData.append(name, value, filename);
 

FormData.append():如果键已经存在,不断使用append()会将新值添加到已有的值集合后面

FormData.set():如果键已经存在,set()会将新值覆盖掉原来的值

FormData.append()中filename可有可无,但是name和value就必须要有。

MDN中讲到value值可以是Blob和File类型的值,File好理解;Blob(binary large object)),通俗点讲就是大的二进制对象,可以是图片、音频,而且BLOB常常是数据库中用来存储二进制文件的字段类型,例如mysql数据库。

 

好了,讲完那么多,直接实践

 

先试一波水,其实想找上传文件,然后获取文件名;但是想着先确认能不能直接在js中获取文件名,结果很出乎意料,js好像没有特定的函数可以直接获取文件名的,情急之下,唯有采取路径名来进行分解。

 

 

 文件:<input type="file" name="file" id="file"><br> //html代码
//js代码
 var file = $("#file").val(); //获取文件路径名
 console.log(file);

 var index = file.lastIndexOf("\\"); //最后一个匹配转义字符'\\'的索引位置
 console.log(index);

 console.log(file.substring(index+1));  //获取最后'\\'的后面字符串便是文件名

结果:Chrome的结果,说是为了安全隐藏了文件路径,用了个fakepath代替

 

 

无语后,用了Edge试试,行了

 

 

没关系,反正php有一个特定函数可以获取文件名:basename()

 

index.html代码:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <!--利用cdn添加js和css库  -->
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

</head>
<body style="text-align: center; padding: 100px;">

 姓名: <input type="text" name="name" id="yourName" /><br>
 年龄: <input type="text" name="age" id="yourAge" /><br>
 性别: <input type="text" name="sex"  id="yourSex"><br>
 文件:<input type="file" name="file" id="file"><br>

<button id="send">提交</button>
<br><br><br><br>

<div id="result">结果:</div>
</body>   

<script type="text/javascript">

  $(function () {
      $("#send").click(function () {

          var name = $("#yourName").val();
          var age = $("#yourAge").val();
           var sex = $("#yourSex").val();

           var file = $("#file").val(); //获取文件路径名
           console.log(file);

           var index = file.lastIndexOf("\\"); //最后一个匹配转义字符'\\'的索引位置
           console.log(index);

           console.log(file.substring(index+1));  //获取最后'\\'的后面字符串便是文件名

           var formData = new FormData();

           formData.append('name',name);
           formData.append('age',age);
           formData.append('sex',sex);
           formData.append('file',file);
          
           $.ajax({
             type: "POST",
             url: "server.php",  //同目录下的php文件
           
            data:formData,
            dataType:"json", //声明成功使用json数据类型回调

            //如果传递的是FormData数据类型,那么下来的三个参数是必须的,否则会报错
             cache:false,  //默认是true,但是一般不做缓存
             processData:false, //用于对data参数进行序列化处理,这里必须false;如果是true,就会将FormData转换为String类型
             contentType:false,  //一些文件上传http协议的关系,自行百度,如果上传的有文件,那么只能设置为false
             
             success: function(msg){  //请求成功后的回调函数

                $("#result").append("你的名字是"+msg.name+",性别:"+msg.sex+",年龄:"+msg.age+",上传的文件名:"+msg.file);

            }
        });

      })
  })
 
</script>


</html>
 

 

server.php代码

 

<?php

	$username = $_POST['name']; //获取索引
	$age = $_POST['age'];
	$sex = $_POST['sex'];
	$file = basename($_POST['file']);  //php的basename() 方法可获取文件名
	$json_array = array('name'=>$username,'age'=>$age ,'sex'=>$sex,'file'=>$file ); //转换成数组类型

	$json= json_encode($json_array);  //将数组转换成json对象
	echo  $json;
	
?>
 

 

结果:

 

 

 

 

 

 

<think>我们被要求解释如何在jQuery$.ajax方法中配置异步(asynchronous)或同步(synchronous)请求。 根据引用[1]和引用[4]中的信息,我们知道在$.ajax中有一个名为async的属性,它可以控制请求是异步还是同步。 默认情况下,async为true,表示异步请求。如果我们需要同步请求,则设置async为false。 但是,引用[2]提到,当进行跨域请求(如使用JSONP)时,async标志会被忽略,因为JSONP只支持异步请求。 因此,我们可以这样配置: 1. 异步请求(默认): async: true 或者不设置(因为默认就是true) 2. 同步请求: async: false 注意:同步请求会阻塞浏览器,直到请求完成,因此应谨慎使用。 下面给出两个示例: 示例1:异步请求(默认) $.ajax({ url: "testserver.php", type: "GET", dataType: "json", success: function(data) { // 处理成功返回的数据 } }); 示例2:同步请求 $.ajax({ url: "testserver.php", type: "GET", dataType: "json", async: false, // 设置为同步 success: function(data) { // 处理成功返回的数据 } }); 另外,引用[1]还提醒,同步请求可能会暂时锁定浏览器,导致用户体验不佳。 所以,我们通常建议使用异步请求,除非有特殊需求(例如需要按顺序执行多个请求,并且后面的请求依赖于前面的请求结果)才使用同步请求。 同时,注意跨域请求(使用JSONP)时,无法使用同步请求。 最后,我们参考引用[4]中的示例,它展示了一个异步请求的示例(没有设置async属性,所以是异步的),并在success回调中处理返回的数据。 总结: - 异步:async: true(默认) - 同步:async: false(但注意跨域JSONP请求不支持同步) 引用说明: [^1] 提到了async属性的默认值和同步请求的缺点。 [^2] 提到了跨域请求(JSONP)时async被忽略。 [^4] 展示了一个异步请求的示例。 因此,在回答中,我们将按照上述内容进行组织,并给出代码示例。</think>### jQuery $.ajax 中异步同步请求配置详解 在 jQuery 的 `$.ajax` 方法中,通过 **`async` 参数**控制请求的异步/同步模式: #### 📌 核心配置参数 ```javascript $.ajax({ url: "your-endpoint", async: true, // 异步模式(默认) // async: false, // 同步模式 // ...其他参数 }); ``` #### ⚡ 异步请求(推荐) - **特点**: - 默认模式(`async: true`) - 非阻塞式:请求发送后浏览器可继续执行其他操作 - 通过回调函数处理响应(`success`/`error`/`complete`) - **示例**: ```javascript $.ajax({ url: "api/data", type: "GET", async: true, // 可省略(默认true) success: function(response) { console.log("异步响应:", response); }, error: function(xhr) { console.error("请求失败"); } }); console.log("此消息会立即显示"); // 先执行 ``` #### ⚠️ 同步请求(谨慎使用) - **特点**: - 需显式设置 `async: false` - 阻塞式:浏览器锁定直到请求完成 - **严重性能问题**:可能导致页面假死 - **跨域限制**:JSONP 请求强制异步(`async: false` 无效)[^2] - **示例**: ```javascript $.ajax({ url: "api/data", type: "POST", async: false, // 同步模式 data: { key: "value" }, success: function(response) { console.log("同步响应:", response); } }); console.log("此消息在请求完成后显示"); // 后执行 ``` #### 📊 对比总结 | 特性 | 异步 (`async: true`) | 同步 (`async: false`) | |--------------|-------------------------------|-------------------------------| | **默认值** | ✅ 是 | ❌ 否 | | **阻塞UI** | ❌ 不阻塞 | ✅ 阻塞(页面假死风险)[^1] | | **回调处理** | ✅ 需使用 `success` 等回调 | ❌ 可直接获取返回值 | | **适用场景** | 常规请求、耗时操作 | 特殊顺序依赖(极少使用) | | **跨域限制** | 无限制 | JSONP 强制异步[^2] | #### 💡 最佳实践建议 1. **优先使用异步模式** 同步请求会导致浏览器锁定,用户体验极差[^1] ```javascript // ✅ 推荐异步 $.ajax({ url: "api/save", success: updateUI // 回调更新界面 }); ``` 2. **需要顺序请求时改用链式调用** ```javascript // 代替同步请求的链式方案 $.ajax("api/step1") .then(function(res1) { return $.ajax("api/step2?data=" + res1); }) .then(function(res2) { console.log("最终结果:", res2); }); ``` 3. **JSONP 特殊处理** 跨域 JSONP 强制异步,需用回调函数: ```javascript $.ajax({ url: "https://api.example.com?callback=?", dataType: "jsonp", // 强制异步 success: function(data) { console.log("跨域数据:", data); } }); ``` > 同步请求应严格限制在特殊场景(如认证初始化),并注意避免在大型表单处理中使用。绝大多数情况下,异步模式配合回调/Promise 是更优方案[^3][^4]。 --- ### 相关问题 #### 1. 同步请求为什么会导致浏览器锁定? 同步请求阻塞 JavaScript 执行线程,浏览器渲染引擎同时被冻结,导致用户无法进行任何交互[^1]。 #### 2. 如何获取同步请求的返回值? 同步模式下可直接接收返回值(不推荐): ```javascript let result; $.ajax({ url: "api/data", async: false, success: function(data) { result = data; } }); console.log(result); // 直接使用返回值 ``` #### 3. 哪些场景必须使用异步请求? - 跨域 JSONP 请求[^2] - 文件上传(需配合 FormData) - 长时间轮询(Long-polling) - 所有需要保持UI响应的操作 #### 4. 如何检测请求是否同步? 检查 `jqXHR` 对象的 `readyState`: ```javascript const jqXHR = $.ajax({ url: "api/test", async: false }); console.log(jqXHR.readyState); // 同步请求返回4(已完成) ``` > 引用说明:同步请求的阻塞特性[^1],JSONP的异步限制[^2],异步回调实践[^4]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值