jQuery 表单序列化实例代码

废话不多说了，直接给大家贴代码了，具体代码如下所述：

$(function(){
  $('#send').click(function(){
     $.ajax({
       type: "GET",
       url: "test.json",
       data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
       dataType: "json",
       success: function(data){
          // code...
       }
     });
  });
});
$(function(){
  $('#send').click(function(){
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax({
      type: "GET",
      url: "test.json",
      data: "username"+username+"&password"+password, // 参数为字符串拼接，并用&连接
      dataType: "json",
      success: function(data){
        // code...
      }
    });
  });
});

以上是一段常规的ajax请求代码，其中分别列举了data参数的两种传递格式。

为了简便ajax请求时的data参数获取，jquery定义了几个快速的方法。

1.serialize()

　　用法：var data = $("form").serialize();

　　返回值：将表单内容序列化成一个字符串。

　　这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。

其核心方法是$.param()，用来对一个数组或对象按照key/value进行序列化，

var obj = {first:"one",last:"two"};
var str = $.param(obj);
console.log(str);    // first=one&last=two

　　另外，使用serialize有个好处是自带中文编译处理。所以，推荐使用serialize。

2.serializeArray()

　　用法：var jsonData = $("form").serializeArray();

　　返回值：将页面表单序列化成一个JSON结构（键值对）的对象。

　　比如，[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[index].name

综上：在使用ajax提交表单数据时,data参数设置为$(form).serialize()或$(form).serializeArray()都可以。另外有些细节建议参考w3c。

最后补充一个完整实例。

html：

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form id="demo">
    <input type="text" value="demo1" name="demo1">
    <input type="text" value="demo2" name="demo2">
    <input type="text" value="demo3" name="demo3">
    <input type="submit" value="提交" id="submit">
  </form>
</body>
</html>

JavaScript：

<script>
  // 别忘了引入jquery !!!
  $(function(){
    $("#submit").click(function(){
    // var data = $("form").serializeArray();
      var data = $("form").serialize();
      $.ajax({
        type:"GET",
        url:"1.php",
        data:data,
        dataType:"json",
        success:function(data){
          console.log(data);
        },
        error:function(xhr,error){
          console.log(error);
        }
      })
    })
  })
</script>

php  提醒：需要配置php环境并开启服务器

<?php
   echo json_encode($_GET);
 ?>

以上所述是小编给大家介绍的jQuery 表单序列化实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • jQuery-serialize()输出序列化form表单值的方法

    实例 输出序列化表单值的结果: 复制代码 代码如下: $("button").click(function(){ $("div").text($("form").serialize()); }); 定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语

  • JQuery中serialize() 序列化

    本文导读:在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2-)后提交.下面介绍JQuery中serialize()的用法 一.serialize()定义和用法: serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • jQuery实现form表单元素序列化为json对象的方法

    jQuery实现form表单元素序列化为json对象的方法

    本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

  • jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法

    序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 原因:.serialize()自动调用了encodeURIComponent方法将数据编码了 解决方法:调用decodeURIComponent(XXX,true);将数据解码 例如: var params = jQuery("#formId").serialize(); // http request parameters. params = deco

  • jquery序列化表单去除指定元素示例代码

    复制代码 代码如下: <html> <head> </head> <body> <form name="form1"> <input type="hidden" name="page1" class="flau_u_ro" value="1"></input> <input type="hidden"

  • jQuery中验证表单提交方式及序列化表单内容的实现

    之前项目中使用的表单提交方式 使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中 复制代码 代码如下: function addSubmit(){ $('#addForm').form('submit', { url : _basePath + '/@Controller/@RequestMapping', onSubmit : function() { if(boolean){//放置能否提交的判断条件 $.messager.show({ title:'提示',msg:'

  • 基于jQuery的一个扩展form序列化到json对象

    复制代码 代码如下: $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.nam

  • jquery将一个表单序列化为一个对象的方法

    复制代码 代码如下: var aa=function(form){ var o={}; $.each(form.serializeArray(),function(index){ if(o[this['name']]){ o[this['name']] = o[this['name']]+","+this['value']; }else{ o[this['name']] = this['value']; } }); return o; }

  • jQuery 表单序列化实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所述: $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象 dataType: "json"

  • jQuery表单事件实例代码分享

    本文实例为大家分享了jQuery表单事件代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单事件</title> </head> <style type="text/css" rel="stylesheet">

  • AngularJs表单验证实例代码解析

    AngularJs表单验证实例代码解析

    常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

  • Bootbox将后台JSON数据填充Form表单的实例代码

    序言: 刚结束公司的三个月试用期,意味着我即将正式步入社会成为广大从事IT行业的一员.作为一个编程小白,无论从技术层面还是知识层面都是比较薄弱的,想要成为一个优秀的程序员不断的学习与探索是不可避免的.我相信一切的付出与收获是成正比的!Fighting! 这几天在做公司的实际项目的时候,需要实现选中Bootstrap table中的任意一行数据点击编辑按钮弹出一个模态框以表单的形式对该行数据进行编辑.获取表格行的数据是比较方便的,具体可以查找Bootstrap table参考文档,具体地址可以直接

  • jquery表单验证实例仿Toast提示效果

    jquery表单验证实例仿Toast提示效果

    HTML内容部分 <div class="classname"> <label for="">请输入您的手机号码</label> <input type="text" id="MobilePhone"/> <input type="text" /> --> </div> 提示html及样式部分 <div id="e

  • BootStrap表单验证实例代码

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap表单验证实例代码,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@

  • Python 自动化表单提交实例代码

    Python 自动化表单提交实例代码

    今天以一个表单的自动提交,来进一步学习selenium的用法 练习目标 0)运用selenium启动firefox并载入指定页面(这部分可查看本人文章 http://www.cnblogs.com/liu2008hz/p/6958126.html) 1)页面元素查找(多种查找方式:find_element_*) 2)内容填充(send_keys) 3)iframe与父页面切换(switch_to_frame是切换到iframe,switch_to_default_content是切换到主页面)

  • 第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

  • jQuery表单元素选择器代码实例

    本文实例为大家分享了jQuery表单元素选择器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href=

随机推荐