jQuery ajax()使用serialize()提交form数据

红太狼 2022-05-30 10:18 183阅读 0赞

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，如：

<form action="">
    First name: <input type="text" name="FirstName" value="Bill" /><br />
    Last name: <input type="text" name="LastName" value="Gates" /><br />
    </form>

$(document).ready(function(){
        console.log($("form").serialize()); // FirstName=Bill&LastName=Gates
    });

这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()，举例如下：

![复制代码][copycode.gif]

$.ajax({
        type: 'post',
        url: 'your url',
        data: $("form").serialize(),
        success: function(data) {
            // your code
        }
    });

![复制代码][copycode.gif]

使用$.post()、$.get()和$.getJSON()也是一样的：

![复制代码][copycode.gif]

$.post('your url', $("form").serialize(), function(data) {
            // your code
        }
    });
    
    $.get('your url', $("form").serialize(), function(data) {
            // your code
        }
    });
    
    $.getJSON('your url', $("form").serialize(), function(data) {
            // your code
        }
    });

![复制代码][copycode.gif]

[copycode.gif]: /images/20220530/5ba5b580ce0045a38cec5c1f4e617b25.png

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery ajax()使用提交表单数据

HTML页面结构： <form id="frm"> 姓名: <input type="text" name="uname" value="John" /><b

快来打我*/ 2024年02月17日 18:13/ 0 赞/ 30 阅读

相关使用ajax实现form提交

1、常见的form表单提交都是使用submit 直接提交给form表单中action的地址。常见的form表单提交 <form:form action="

深藏阁楼爱情的钟/ 2023年07月08日 14:28/ 0 赞/ 96 阅读

相关 jquery.form.js 使用ajax方式提交表单

引入jquery文件 <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

àì夳堔傛蜴生んèń/ 2022年12月07日 15:08/ 0 赞/ 196 阅读

相关使用ajax提交form表单

function mySubmit(){ var chapter=$("myForm").serialize(); $.ajax({ typ

比眉伴天荒/ 2022年08月23日 03:48/ 0 赞/ 269 阅读

相关 jquery提交ajax Form(未完成)

ajaxSubmit 和ajaxForm区别官方解释 What is the difference between ajaxForm and ajaxSubmit

淡淡的烟草味﹌/ 2022年08月19日 01:40/ 0 赞/ 171 阅读

相关使用Jquery serialize序列化Form表单

HTML代码 <form> <div class="login-screen"> <div class="login-form">

﹏ヽ暗。殇╰゛Y/ 2022年07月30日 14:27/ 0 赞/ 269 阅读

相关 Ajax获取form表单提交数据

<!DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" > < meta na

本是古典何须时尚/ 2022年06月16日 12:27/ 0 赞/ 407 阅读

相关 jQuery ajax()使用serialize()提交form数据

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，如： <for

红太狼/ 2022年05月30日 10:18/ 0 赞/ 184 阅读

相关 form提交--jquery.form.js

jquery.form.js 官网 http://www.malsup.com/jquery/form/ 先写一个简单的form，提交后在后台打印参数。

刺骨的言语ヽ痛彻心扉/ 2022年03月19日 14:19/ 0 赞/ 236 阅读

相关使用jQuery插件jQuery.form.js进行ajax提交表单

有时候我们想直接用ajax提交整个表单但是不刷新页面，这时候就显得有点麻烦，但是jQuery.form.js这个插件就完美解决了这个问题。 jQuery.form.js是一

向右看齐/ 2021年09月16日 14:30/ 0 赞/ 592 阅读