目录 jquery ajax的应用

1 表单提交

2 ajax的提交（ajax post get）

普通的表单提交

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

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

pageContext.setAttribute("basePath",basePath);

%>    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'login.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

  </head>

<!--  <script src="js/jquery_1.83min.js"></script>-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

  <body>

    <div>

    <form id="form1" action="" >

            <input type="text" name="username"><br>

            <input type="text" name="password"><br>

            <input type="button" value="登录" id="but1">

    </form>

    </div>

    <script type="text/javascript">

    $('#but1').click(function(){

    $('#form1').attr({'action':"${pageScope.basePath}login",'method':"post"}).submit();

    });

    </script>

</html>

$.ajax

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

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

pageContext.setAttribute("basePath",basePath);

%>    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'login.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

  </head>

<!--  <script src="js/jquery_1.83min.js"></script>-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

  <body>

    <div>

    <form id="form1" action="" >

            <input type="text" name="username"><br>

            <input type="text" name="password"><br>

            <input type="button" value="登录" id="but1">

    </form>

    </div>

    <script type="text/javascript">

    $('#but1').click(function(){

        var user={username:"sunfan",password:'helloworld'};

        $.ajax({

            url:"login", //访问地址--action地址

            type:"post", //提交方式

            data:user,   //提交给服务器的数据

            success:function(reData){ //回调函数的处理方式

            alert(reData);

            }

        });

    });

    </script>

</html>

$.post

$('#but1').click(function(){

        var user={username:"sunfan",password:'helloworld'};

           $.post( //提交方式

              "login", //访问地址

              user,   //提交给服务器的数据

              function(reData){//回调函数的处理方式

              alert(reData);

              }

           );

    });

$.get与post类似只是提交的方式不同

$('#but1').click(function(){

        var user={username:"sunfan",password:'helloworld'};

           $.get(

              "login",

              user,

              function(reData){

              alert(reData);

              }

           );

    });

jquery 提交数据的更多相关文章

  1. angular的$http.post()提交数据到Java后台接收不到参数值问题的解决方法

    本文地址:http://www.cnblogs.com/jying/p/6733408.html   转载请注明出处: 写此文的背景:在工作学习使用angular的$http.post()提交数据时, ...

  2. JQuery按回车提交数据

    引入JQuery文件 <script src="JS/jquery-1.9.1.js" type="text/javascript"></sc ...

  3. JQuery以JSON方式提交数据到服务端

    JQuery将Ajax数据请求进行了封装,从而使得该操作实现起来容易许多.以往我们要写很多的代码来实现该功能,现在只需要调用$.ajax()方法,并指明请求的方式.地址.数据类型,以及回调方法等.下面 ...

  4. 2016 系统设计第一期 （档案一）jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  5. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  6. ajax数据提交数据的三种方式和jquery的事件委托

    ajax数据提交数据的三种方式 1.只是字符串或数字 $.ajax({ url: 'http//www.baidu.com', type: 'GET/POST', data: {'k1':'v1'}, ...

  7. JQuery中使用FormData异步提交数据和提交文件

    web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...

  8. jquery ajax提交数据给后端

    大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...

  9. Form 表单用 Ajax 提交数据并用 jQuery Validate 验证

    表单填写需要验证可用插件 jQuery Validate 提交数据使用 Ajax 可操控性得到提到 注意:请自行引入 jQuery 和 jQuery Validate HTML 代码 <form ...

随机推荐

  1. LibSVM笔记系列（3）——初学移植libsvm的C/C++版本

    在LibSVM笔记系列(1)中已经提到在g++环境中编译LibSVM只需要一个make命令那样简单. 本文将介绍 (1)LibSVM的编译文件结构 (2)svm.h中重要数据结构及函数分析 (3)sv ...

  2. 第一篇：GCD的使用

    一.主队列介绍 主队列是和主线程相关的队列,主队列是GCD自带的一种特殊的串行队列,放在主队列中的任务,都会放到主线程中执行. 提示:如果把任务放到主队列进行处理,那么不论处理函数是异步的还是同步的都 ...

  3. ContentProvider的一些总结

    ContentProvider中的URI, The URI that identifies the provider   一个特定的uri对应着唯一一个内容提供者, 谷歌官方文档里的说明, Query ...

  4. CentOS 6.5上安装MySQL-Cluster

    参考博文: CentOS 6.2下MySQL Cluster 7.2 配置数据库集群 CentOS 6.5上安装MySQL-Cluster 7.3.4过程笔记--下一步学习 MySQL Cluster ...

  5. Python之路Day10

    本节主要内容:memcache&redis.RabbitMQ.twisted框架 1. memcache&redis 1.1 memcache Memcached 是一个高性能的分布式 ...

  6. HDU 3925 Substring 【大数相减】

    题目意思是,给你提供两个数字 a 和 b a 可以不断的往上加, 直到b 为其子串 问的是 a 最小加几? 显而易见,a  的数据范围给了10 ^100非常大,直接模拟肯定不行 那么就用 b 减去 a ...

  7. django perm用法

    定义用户model时可以给用户分配权限: class Meta: permissions = (       ("can_mark", "Can mark"), ...

  8. CCIE路由实验(3) -- BGP高级部分

    当一个AS包含多个IBGP对等体时,路由反射器非常有用.因为IBGP客户只需要和路由反射器建立邻居关系,从而降低了IBGP的连接数量.路由反射器和它的客户合称为一个簇.路由反射是克服IBGP水平分割的 ...

  9. 【四】注入框架RoboGuice使用:(Your First System Service Injection)

    上一篇我们简单的介绍了一下RoboGuice的使用([三]注入框架RoboGuice使用:(Your First Resource Injection)),今天我们来看下系统服务的使用注解的方法: 为 ...

  10. 2014Esri全球用户大会之标准和互操作

    1.   ArcGIS是一个开放协作的平台吗?Esri是怎样看待"开放"的? 是的,ArcGIS是一个开放协作的平台.Esri公司致力于支持我们的用户更加easy的在异构环境下工作 ...