微信扫一扫打赏支持

js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

打赏

 

一、总结

一句话总结：如果用ajax传递表单的数据，如果不进行表单的序列化，要一个参数一个参数的写，太麻烦，序列化的话，一句代码搞定。data:$('form').serialize()，这样一句话解决复杂的表单ajax的post传值过程。

 

1、表单序列化函数是什么？

$（selector).serialize()和serializeArray()

24     <script>
25         $(function(){
26             $('form input[type=button]').click(function(){
27                 $.ajax({
28                     type:'POST',
29                     url:'buy.php',
30                     // data:{
31                     //     user:$('form input[name=user]').val(),
32                     //     Tel:$('form input[name=Tel]').val(),
33      //                      buy:$('form select[name=buy]').val()
34                     // },
35                     data:$('form').serialize(),
36                     success:function(responseTxt,statusTxt,xhr){
37                         //alert(responseTxt)
38                         $('#txt').html(responseTxt)
39                     }
40                 })
41 
42             })
43         })
44     </script>

 

2、表单序列化函数serialize()如何使用？

$（selector).serialize()，其实设置好监听对象就好了

35                     data:$('form').serialize(),

 

3、表单序列化的优势是什么（讲解+实例）？

极大的减少代码量和出错

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()

24     <script>
25         $(function(){
26             $('form input[type=button]').click(function(){
27                 $.ajax({
28                     type:'POST',
29                     url:'buy.php',
30                     // data:{
31                     //     user:$('form input[name=user]').val(),
32                     //     Tel:$('form input[name=Tel]').val(),
33      //                      buy:$('form select[name=buy]').val()
34                     // },
35                     data:$('form').serialize(),
36                     success:function(responseTxt,statusTxt,xhr){
37                         //alert(responseTxt)
38                         $('#txt').html(responseTxt)
39                     }
40                 })
41 
42             })
43         })
44     </script>

 

 

 

二、jquery的ajax部分为什么需要对表单进行序列化

1、相关知识

表单序列化

  • 语法：$（selector).serialize()

    jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()

  • serializeArray()序列化表格元素（类似'.serialize()'方法返回JSON数据结构数据。

    ’’’注意’’’此方法返回的是JSON对象而非JSON字符串。

 

 

2、代码

 

html

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10       </style>
11 </style>
12 </head>
13 <body>
14     <form id="form1">
15     姓名：<input type="text" name="user"><br>
16     电话：<input type="text" name="Tel"><br>
17           <select name="buy">
18             <option>买新房</option>
19             <option>看二手房</option>
20           </select>
21           <input type="button" value="提交">
22     </form>
23     <div id="txt"></div>
24     <script>
25         $(function(){
26             $('form input[type=button]').click(function(){
27                 $.ajax({
28                     type:'POST',
29                     url:'buy.php',
30                     // data:{
31                     //     user:$('form input[name=user]').val(),
32                     //     Tel:$('form input[name=Tel]').val(),
33      //                      buy:$('form select[name=buy]').val()
34                     // },
35                     data:$('form').serialize(),
36                     success:function(responseTxt,statusTxt,xhr){
37                         //alert(responseTxt)
38                         $('#txt').html(responseTxt)
39                     }
40                 })
41 
42             })
43         })
44     </script>
45 </body>
46 </html>
复制代码

 

 

php

<?php
    echo $_POST['buy'].'---'.$_POST['user'].'---'.$_POST['Tel']
?>

 

 

 

 

 

 
posted @   范仁义  阅读(1762)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
历史上的今天：
2017-07-20 L2-002. 链表去重
2017-07-20 L2-003. 月饼
侧边栏
打赏
点击右上角即可分享
微信分享提示
SQL AI 助手