jquery 序列化 div 内容以发布输入数据

Posted 2023-05-09

【中文标题】jquery 序列化 div 内容以发布输入数据

【英文标题】：jquery serialize a div content to post input data

【发布时间】：2017-07-26 21:32:34

【问题描述】：

我正在尝试使用通常用于表单的 jQuery.serialize() 函数来序列化 div 内的数据。

我无法使用表单标签，因为我正在使用将所有内容包装在表单中的 asp.net webforms，因此嵌套表单不起作用。

这是我的js代码：

$('div.request input.submit-button').on('click', function () 
var form = $(this).parent();

            $.ajax(
            type: "POST",
            url: '/API/InfoRequest.ashx',
            data: $(form).serialize(),
            dataType: "text",
            success: function (response)            

            
        )
);

但是 $(form).serialize() 返回一个空字符串。

这里是 html：

<div role="form" id="sidebar-form"  class="request">
<div class="form-group has-feedback">
    <label for="name3">Nome</label>
    <input type="text" class="form-control" id="name3" placeholder="Nome e Cognome" name="name3">
    <i class="fa fa-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
    <label for="email3">Email</label>
    <input type="email" class="form-control" id="email3" placeholder="Indirizzo Email" name="email3">
    <i class="fa fa-envelope form-control-feedback"></i>
</div>
<div class="form-group">
    <label>Categoria</label>
    <select class="form-control" id="category">
        <option value="Sales">Vendita</option>
        <option value="Support">Tecnica</option>
        <option value="Lorem">Logistica</option>
        <option value="Ipsum sit">Ipsum sit</option>
        <option value="Dolor amet">Dolor amet</option>
    </select>
</div>
<div class="form-group has-feedback">
    <label for="message3">Messaggio</label>
    <textarea class="form-control" rows="4" id="message3" placeholder="" name="message3"></textarea>
    <i class="fa fa-pencil form-control-feedback"></i>
</div>
<input type="button" value="INVIA" class="submit-button btn btn-primary">
</div>

我只想检索表单字段，例如输入、选择、文本区域，将它们发布为 urlencoded 表单，然后在调用的 ASHX 处理程序中读取它们。

是否可以使用serialize()？

【问题讨论】：

由于您实际上并没有使用<form> 标签$(form)，这是 jquery 中的选择标准将不起作用。

@BRogers，我也是这么想的，后来发现是$(form)，不是$("form")

【参考方案1】：

试试

$('#sidebar-form :input, #sidebar-form textarea,  #sidebar-form select').serialize();

或者

$("#sidebar-form").find("select, textarea, input").serialize()

【讨论】：

我是这样弄的：$(form).find("input,select,textarea").serialize()

是的，那行得通。虽然，它在技术上不是一种“形式”，而且命名可能有点混乱。也许是容器？

【参考方案2】：

你必须为此构建自己的函数

function formSerializer(selector)
  data="";
   // look for every form field
  selector.find('input, select, textarea').each(function()
     // serialize data
    data+=$(this).attr("name")+"="$(this).val()+"&";
  );
// remove the last & char
return data.replace(/&$/g,"");

函数调用

$.ajax(
        type: "POST",
        url: '/API/InfoRequest.ashx',
        data: formSerializer(form),
        dataType: "text",
        success: function (response)            

        
    )