直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代码吧,代码比较简单!

Servlet代码:

package com.project.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class AjaxFormServlet extends HttpServlet {

public AjaxFormServlet() {super();}

public void destroy() {super.destroy();}

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

this.doPost(request, response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//String param = request.getParameter("txt");

String param1 = request.getParameter("txt1");

String param2 = request.getParameter("txt2");

System.err.println("参数1的值:param1="+param1+",参数2的值:param2="+param2);

response.setContentType("applicationContext/JSON,encoding=utf-8");

response.getWriter().write("{\"msg\":\"Hello Wold\"}");

}

public void init() throws ServletException {}

}

页面代码:

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

">

首页

$(document).ready(function(){

var options = {

type:"POST",//请求方式:get或post

dataType:"json",//数据返回类型:xml、json、script

beforeSerialize:function(){

//alert("表单数据序列化前执行的操作!");

//$("#txt2").val("java");//如:改变元素的值

},

//data:{'txt':"JQuery"},//自定义提交的数据

beforeSubmit:function(){

//alert("表单提交前执行的操作!");

//if($("#txt1").val()==""){return false;}//如:验证表单数据是否为空

},

success:function(json){//表单提交成功回调函数

alert("表单操作完成!操作结果:"+json.msg);

},

error:function(err){

alert("表单提交异常!"+err.msg);

}

};

$("#form").ajaxForm(options);

});

好了,到此结束,是不是很Easy!

注:在操作时遇到一个很诡异的情况,就是由于我的浏览器问题,后台总是无法接收到参数,其他人访问正常,所以请采用两种浏览器多试试,以免遇到类似的问题,花费自己不必要的时间!

servlet html js提交表单,使用jquery.form.js实现form表单无刷新提交简单示例相关推荐

  1. Ajax提交json数据,通过jquery.cookie.js插件解决csrf_token问题

    html代码和js代码 <!doctype html> <html lang="en"> <head><meta charset=&quo ...

  2. php mysql刷新表格_php读入mysql数据并以表格形式显示(表单实现无刷新提交)

    在网上参考了些例子,于是我这个sample实现了如标题上的功能.话不多说,上代码: lishi.html 搜索 form#form1 { height: 93%; } p { width: 99%; ...

  3. 使用jquery.form.js实现form表单无刷新提交简单示例

    2019独角兽企业重金招聘Python工程师标准>>> 直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代 ...

  4. jQuery表单校验jquery.validate.js的使用

    jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...

  5. android webview js 失效,Android WebView注入JQuery、JS脚本及执行无效的问题解决

    在项目中遇到JQuery注入后,执行无效的问题. 我们知道必须在网页加载完成后,也就是在onPageFinished()方法被调用后才能执行被注入的JS. 但是在有些手机上并不能成功执行,我的解决方案 ...

  6. js实现中英文切换(jquery.i18n.js)

    jquery.i18n.js 实现中英文切换 方法 由于在公司官网所用到中英文切换功能,代码时js.jq写的.个人简单记录一下过程: 用的方法是 jquery.i18n.js. jquery.i18n ...

  7. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  8. Jquery Ajax自定义无刷新提交表单Form

    Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...

  9. 无刷新提交表单(非Ajax实现)

    HTML代码: <iframeid="fra"name="frm"style="display: none;"></ifr ...

最新文章

  1. 动态规划(浅层基础)
  2. Oracle性能调整的误区
  3. Spark优化一则 - 减少Shuffle
  4. python颜值分析
  5. 肇庆计算机商务学校地址,肇庆市商业学校(商业技工学校)招生报名
  6. 实用Redis操作类
  7. use IE7 agent on safari 13
  8. 计算机c盘装什么,电脑只有一个C盘!怎么为电脑重装系统?
  9. ITellYou结合软碟通安装Win10系统指南
  10. 友善之臂mini2440使用日志1
  11. 题解 CF722E 【Research Rover】
  12. BIOS设置中功能的翻译及介绍
  13. 短视频系统源码,android 真正的全屏沉浸式体验
  14. 转-思维要裂变要敢闯想
  15. CG Tools 工具收集
  16. ORA-01400: cannot insert NULL into | 通过SQL链接服务器 往Oracle库的表中 插入默认值问题
  17. dataframe处理excel基础内容
  18. 不懂带人,你就自己干到死
  19. BC26 TCP透传
  20. 成功的 Git 分支模型

热门文章

  1. python 获取硬盘信息_使用python获取电脑的磁盘信息方法
  2. 如何将一个完整项目推到码云_怎么将本地项目放到码云(gitee)上面?图文详解
  3. perl删除文件_Perl小知识语法重点和数据类型
  4. mac php fpm 自动启动,mac系统,php-fpm加入开机启动项
  5. firefox linux脚本启动,在Linux终端中使用后台运行模式启动程序的方法
  6. Python Imaging Library: ImageChops Module(图像通道操作模块)
  7. python使用opencv保存视频_Pythone OpenCV学习笔记之:视频文件读取与保存
  8. vagrant特性——基于docker开发环境(docker和vagrant的结合)-2-命令
  9. PHP-FPM,Nginx,FastCGI 之间的关系
  10. Android中的WebView之loadDataWithBaseURL()与loadData()