jquery表单应用

简介: 有必要获取表单内各input元素的数据,然后用ajax方法以POST方式提交给服务器。如果input元素有ID属性,假设是,可以这样获取: var writervalue=$(”#writer”).val(); 再来一个按扭吧,点击按钮后POST到ok.php去。

有必要获取表单内各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(高层)处理机制,已经被封装好了的,更容易理解和使用。但也有缺点,就是不能返回更详细的信息,比如错误处理……

目录
相关文章
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
109 1
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
227 0
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
101 0
|
JavaScript 前端开发 开发者
jQuery文档对象模型DOM的实际应用
jQuery文档对象模型DOM的实际应用
86 0
|
7月前
|
JavaScript 前端开发
带完成百分比的jQuery表单插件
带完成百分比的jQuery表单插件
|
12月前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
184 0
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
687 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
91 0
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
136 0
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
125 5