Jquery技巧：使用ajax技术提交表单数据

ajax技术带给我们的是良好的用户体验，同时，使用jquery可以简化开发，提高工作效率。
下面就介绍一下大致的开发步骤。

操作方法

  • 01

    新建两个页面: 1、show.jsp：调用ajax，将表单中的数据发送给ajax.jsp页面。 2、ajax.jsp：获取show.jsp页面传递的表单数据，并返回结果。 两个页面的编码格式要设置为GBK： <%@ page contentType="text/html;charset=GBK"%>

  • 02

    show.jsp页面的重点部分： 1、添加对 jquery-1.3.2.min.js 的引用： <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 2、设置表单的id，在调用ajax的方法时要用到。 <form id="ajaxFrm" > 3、设置一个div，用于显示ajax.jsp页面返回的结果 <div id="ajaxDiv"></div> 4、增加一个按钮，用来调用ajax <input type="button" onClick="doFind();" value="调用一下ajax" > 5、增加调用ajax的函数： function doFind(){ $.ajax({ cache: false, type: "POST", url:"ajax.jsp", //把表单数据发送到ajax.jsp data:$('#ajaxFrm').serialize(), //要发送的是ajaxFrm表单中的数据 async: false, error: function(request) { alert("发送请求失败！"); }, success: function(data) { $("#ajaxDiv").html(data); //将返回的结果显示到ajaxDiv中 } }); }

  • 03

    ajax.jsp页面的源代码： <%@ page contentType="text/html;charset=GBK"%> <% String userName = request.getParameter("UserName"); if(userName!=null){ userName = new String(userName.getBytes("ISO-8859-1"), "utf-8");//解决乱码的问题 } String returnString = ""; returnString="你好，" + userName; out.print(returnString); %>

  • 04

    运行效果如下：

赞 (0)

相关推荐

  • jquery ajaxSubmit提交表单 参数 注意事项

    ajx中用jquery中的ajaxSubmit进行异步表单提交 操作方法 01 1.提交的方式 <form name="f1" id="testForm" ...

  • 用Frontpage制作电子邮件提交表单

    现在很多网站都需要访问者填各种表进行注册.每当有访问者填完表点一下"提交"按钮后,网站管理者便会收到一份包含站点访问者输入到表单中的全部数据的邮件,这样对网站的管理是十分便利的. ...

  • 怎样用html写一个简洁的提交表单？

    怎样用html写一个简洁的提交表单? 操作方法 01 新建一个html文件,写上html的头部. 02 写上form表单的外壳.<form></form> 03 为form这个 ...

  • html网页中php提交表单与取值代码

    提交表单后php处理出来的页面.在这个例子中,我输入一个单词,然后给定一个长度,将单词等分成该长度的块. 操作方法 01 这两天学了写表单.总结于此,以备忘. 例子一(POST提交表单): view ...

  • 如何清除edge浏览器中已保存的表单数据

    如何清除edge浏览器中已保存的表单数据

    我们使用的edge浏览器,默认保存表单数据,想要进行清除,该怎么操作呢?今天就跟大家介绍一下如何清除edge浏览器中已保存的表单数据的具体操作步骤.1. 首先打开电脑,找到桌面上的edge浏览器图标, ...

  • 怎么清除电脑版Chrome中自动填充的表单数据

    怎么清除电脑版Chrome中自动填充的表单数据

    电脑版Chrome软件被很多人使用,用来浏览网页,查询资料等,有的用户在使用该软件时,想要清除自动填充的表单数据,但是却不知道如何清除,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,双击或者右 ...

  • 兔展h5如何查看表单数据？

    许多人在制作h5时喜欢用表单收集信息,但收集到的信息如何查看呢,下面为大家简单介绍一下 操作方法 01 点击昵称下拉框中的用户中心 02 点击作品[查看表单]按钮 03 如果表单有数据,就会显示出来, ...

  • 防止form表单重复提交（java后端解决重复提交问题）

    防止form表单重复提交（java后端解决重复提交问题）

    在javaweb方向做开发的小伙伴们,肯定都会遇到表单重复提交的问题.这种问题出现的原因或者说应用场景大致如下:网络延迟,服务器未能及时做出响应,导致用户不断重复点击提交按钮用户双击有意识的双击或者多 ...

  • 表单大师的3个技巧

    大表姐的日常就是天天挖土找金子,开个玩笑啦,其实是每天打开表单100次.所以有了这篇推文,不废话,今天给大家带来了以下3个小技巧: 自动填充 01 之前写过一篇"有一种偷懒的方法叫自动填写& ...