zoukankan      html  css  js  c++  java
  • 【JAVASCRIPT】表单序列化问题

      做项目的过程中,表单是必不可少的,经常用来提供数据。为了获取表单数据,必须将字段的值逐个添加到参数中,如果表单的数据量非常大,不仅添加字段参数的过程无疑是痛苦的,而且表单也缺乏弹性。但是jquery中提供了一个很好的处理表单数据的函数——serialize();

      这个函数可以把表单中的值序列化为字符串。下面是net小伙的测试代码(主要功能:输入用户名和密码,并在下面的p中显示出来):

    前台界面设计如下:

    1 <form action="" id="form1">
    2     用户名:<input name="name" type="text" /><br />
    3     密 码:<input name="pass" type="text" /><br />
    4 
    5 </form>
    6     <input type="button" id="sub" value="提交" /> <br />
    7     <p id="result"></p>

    添加一个一般处理程序文件,代码如下:

    1         public void ProcessRequest(HttpContext context)
    2         {
    3             context.Response.ContentType = "text/plain";
    4             //context.Response.Write("Hello World");
    5             string username = context.Request["name"];
    6             string password = context.Request["pass"];
    7             context.Response.Write(username + password);
    8 
    9         }

    引用jquery库,然后编写javascript代码:

     1     <script type="text/javascript">
     2         $(function () {
     3             $("#sub").click(function () {
     4                 var rerial = $("#form1").serialize();
     5                 $.post("ashx/formlists.ashx", rerial, function (data, status) {
     6                     if (status == "success") {
     7                         $("#result").html(data);
     8                     }
     9                 });
    10 
    11             });
    12 
    13         });
    14     </script>

    需要注意的事项是:表单中的input必须有name这个属性,因为一般处理程序中请求参数是通过name属性来获取参数的值;net小伙在刚开始用了id这个属性,但是是了一天都没试出来。经测试发现得到的值总是空值,然后在W3C上看了一下使用方法,又对比了自己的代码,发现只有name属性缺少了,其他的都一样,然后添加了name属性就ok了!

  • 相关阅读:
    DS博客作业02--线性表
    DS博客作业01--日期抽象数据类型设计与实现
    C语言博客作业06--结构体&文件
    C语言博客05--指针
    DS博客作业07--查找
    DS博客作业06--图
    DS博客作业05--树
    DS博客作业03--栈和队列
    DS博客作业02--线性表
    DS博客作业01--日期抽象数据类型设计与实验
  • 原文地址:https://www.cnblogs.com/ngnetboy/p/2651850.html
Copyright © 2011-2022 走看看