jquery序列化-jQueryajax（）使用 serialize（）提交表单数据

bendan520 jquery

2023-08-21 0 9,175 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

jQueryajax（）使用 serialize（）提交表单数据

LXW1844912514 发布于 2022/03/2703：01：192022/03/27

【摘要】jQuery的serialize（）方法通过序列化表单值和创建URL编码的文本字符串，我们可以选择一个或多个表单元素，或者直接选择表单进行序列化，如：<formaction=“”>Firstn....

jQuery 的 serialize（）方法通过序列化表单值来创建 URL 编码的文本字符串，我们可以选择一个或多个表单元素jquery序列化，或者直接选择 form 来序列化它们jquery序列化，比如：

<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
});

这样，我们可以将序列化的值作为 URL 参数传递给 ajax（），并且轻松地使用 ajax（）提交表单表单，而不是逐个获取表单中的值并将其传递给 ajax（），例如：

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

使用 $.post（）、$.get（）

和 $.getJSON（）也是如此。

$.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  } });

jquery表单提交获取元素值并显示

看下面的例子，控制jquery对象，表单提交后jquery获取元素jquery获取元素，通过jquery获取元素的值，并显示获取到的数据。

html代码如下：




控制jQuery对象


.divFrame{width:260px;border:solid 1px #666;font-size:10pt}
.divTitle{background-color:#eee;padding:5px}
.divContent{padding:8px;font-size:9pt}
.divTip{width:244px;border:solid 1px #666;padding:8px;font-size:9pt;margin-top:5px;display:none}
.txtCss{border:solid 1px #ccc}
.divBtn{padding-top:5px}
.divBtn .btnCss{border:solid 1px #535353;width:60px}


$(function(){
$("#btnSubmit").click(function(){
var oTxtValue=$("#Text1").val(); //获取文本框的值
var oRdoValue=$("#Radio1").is (":checked")?"男":"女"; //获取单选框按钮值
var oChkValue=$("#Checkbox1").is (":checked")?"已婚":"未婚";//获取复选框按钮值
$("#divTip").css("display","block").html(oTxtValue+"
"+oRdoValue+"
"+oChkValue); //显示提示文本元素
})
})




请输入如下信息

姓名：

性别：男
女

婚否：