目录 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. TCP/IP之TCP连接的建立与中止状态分析

    TCP连接的建立可以简单的称为三次握手,而连接的中止则可以叫做四次握手. 1.连接的建立: c端发起请求同步(用SYN段等于1的TCP报文),确认某个端口是否监听: s端应答(用ACK段等于1的TCP ...

  2. 【Maven】Missing artifact com.oracle:ojdbc14:jar:10.2.0.4.0

    1.到 http://www.oracle.com/technetwork/database/features/jdbc/index-091264.html 下载你所需要的oraclejar包 2.在 ...

  3. 字符串查找函数 find()函数

    find()函数可以帮助你在两个字符串之间,查找很多他们的关系... #include<iostream> #include<string> using namespace s ...

  4. .NET通过PowerShell操作ExChange为用户开通邮箱账号

    最近工作中一个web项目需要集成exchange邮箱服务,注册用户时需要动态创建邮箱用户,终于在http://www.cnblogs.com/gongguo/archive/2012/03/12/23 ...

  5. ZOJ 3872 Beauty of Array DP 15年浙江省赛D题

    也是一道比赛时候没有写出来的题目,队友想到了解法不过最后匆匆忙忙没有 A 掉 What a pity... 题意:定义Beauty数是一个序列里所有不相同的数的和,求一个序列所有字序列的Beauty和 ...

  6. Codeforces 479D - Long Jumps

    479D - Long Jumps, 480B - Long Jumps It , or . If we can already measure both x and y, output . Then ...

  7. Week13（12月2日）：又到了那个点，期末了~~~~

    Part I:提问 =========================== 1.ASP.NET MVC是微软.NET平台上的一个(      ). A.语言    B.集成开发环境    C.Web开 ...

  8. Android自定义组合控件：UIScrollLayout（支持界面滑动及左右菜单滑动）

    一.前言: 我之前很早的时候,写过一篇<左右滑出菜单>的文章: http://blog.csdn.net/qingye_love/article/details/8776650 用的是对V ...

  9. CString 操作指南

    过阅读本文你可以学习如何有效地使用 CString. CString 是一种很有用的数据类型.它们很大程度上简化了MFC中的许多操作,使得MFC在做字符串操作的时候方便了很多.不管怎样,使用CStri ...

  10. Codeforces Round #198 (Div. 2) C. Tourist Problem

    C. Tourist Problem time limit per test 1 second memory limit per test 256 megabytes input standard i ...