zoukankan      html  css  js  c++  java
  • jquery表单应用

    有必要获取表单内各input元素的数据,然后用ajax方法以POST方式提交给服务器。如果input元素有ID属性,假设是<input type=”text” name=”writer” id=”writer” />,可以这样获取:

    var writervalue=$(”#writer”).val();

    再来一个按扭吧,点击按钮后POST到ok.php去。

    <input name=”writer” id=”writer” type=”text” value=”writer” />
    <input type=”submit” name=”button” id=”button” value=”提交” />

    先不考虑用submit提交表单,因为有jquery的Form插件可以近乎完美地完成表单的提交。这是个很强大的插件……

    <script type=”text/javascript” src=”jquery.js” mce_src=”jquery.js”></script>
    <script type=”text/javascript”>

    $(document).ready(function(){        //DOM的onload事件处理函数
      $(”#button”).click(function(){          //当按钮button被点击时的处理函数
        postdata();                                      //button被点击时执行postdata函数
      });
    });

    function postdata(){                             //提交数据函数
      $.ajax({                                                 //调用jquery的ajax方法
        type: “POST”,                                     //设置ajax方法提交数据的形式
        url: “ok.php”,                                      //把数据提交到ok.php
        data: “writer=”+$(”#writer”).val(),    //输入框writer中的值作为提交的数据
        success: function(msg){                 //提交成功后的回调,msg变量是ok.php输出的内容。
          alert(”数据提交成功”);                     //如果有必要,可以把msg变量的值显示到某个DIV元素中
        }
      });
    }

    </script>

    大功告成!假如输入框很多,在ajax方法的data参数里可以这样表示:

    data:”n1=&n2=&n3=…”

    jquery的Form插件可以轻松而且不引发页面刷新地提交表单,所以这个插件被很多开发人员使用(插件需要在jquery库之后加载)。这个插件提供一个formToArray方法获得表单中所有元素的值的数组,可以这样做:

    var data = $(”#myForm”).formToArray();
    $.post( “ok.php”, data );

    变量data事实上是个数组。变量通过jquery的post方法提交到ok.php。

    看上去用post方法要比ajax方法省事。jquery的ajax方法是low-level(底层)处理机制,而post、get、方法则是higher-level(高层)处理机制,已经被封装好了的,更容易理解和使用。但也有缺点,就是不能返回更详细的信息,比如错误处理……

  • 相关阅读:
    AQS的子类在各个同步工具类中的使用情况
    SpringBoot RabbitMQ 延迟队列代码实现
    Java线程状态、线程start方法源码、多线程、Java线程池、如何停止一个线程
    Java内存模型,为啥线程要有自己的本地内存,CPU高速缓存
    Java内存模型中volatile关键字的作用
    Java内存模型、JVM内存结构和Java对象模型
    搞定springboot项目连接远程服务器上kafka遇到的坑以及完整的例子
    MongoDB导出与导入远程Linux服务器上的数据
    DeferredResult使用方式和场景
    【IT笔试面试题整理】二叉树中和为某一值的路径--从根到叶子节点
  • 原文地址:https://www.cnblogs.com/lzhdim/p/1391949.html
Copyright © 2011-2022 走看看