目录 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. iOS 数据库第三方FMDB的简单使用

    一 FMDB的简单说明及介绍 FMDB的github地址 https://github.com/ccgus/fmdb FMDB是一款简洁的,易用的封装库,简单介绍一下FMDB的使用 在FMDB下载文件 ...

  2. Codeforces Round #250 (Div. 2)—A. The Child and Homework

         好题啊,被HACK了.曾经做题都是人数越来越多.这次比赛 PASS人数 从2000直掉 1000人  被HACK  1000多人! ! ! ! 没见过的科技啊 1 2 4 8 这组数 被黑的 ...

  3. sublime快捷方式和node.js

    快捷方式具体见:http://blog.useasp.net/archive/2013/06/14/sublime-text-2-all-default-Shortcuts-table-on-wind ...

  4. JSONP跨域的原理解析[转]

    转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中, ...

  5. SSH整合，"sessionFactory " or "hibernateTemplate " is required异常

    首先遇到的问题就是HibernateDaoSupport引起的,程序中所有的DAO都继承自HibernateDaoSupport,而HibernateDaoSupport需要注入sessionfact ...

  6. 基于Sql Server 2008的分布式数据库的实践（二）

    原文 基于Sql Server 2008的分布式数据库的实践(二) 从Win7连接Win2003的Sql Server 2008 1.新建链接服务器链接到Win2003的Sql Server 2008 ...

  7. php三元运算

    $a = 2; $a == 1 ? $test="企业" : ($a==2 ? $test="地区" : $test="其他地方"); ec ...

  8. python 3.4 装matplotlib numpy

    为了装个matplotlib包,搞了好久:   python3.4,官方没有对应版本的包,只能去下面这个地方下对应的版本: http://www.lfd.uci.edu/~gohlke/pythonl ...

  9. android handler looper thread

    在线程中调用包含创建handler方法的时候,会报错,提示: “need call Looper.prepare()” -- 在创建之前,调用Looper.prepare()方法来创建一个looper ...

  10. 使用内容提供者和xml备份联系人

    1.通过内容提供者获取联系人信息 package com.ithaimazyh.readcontact; import java.util.ArrayList; import java.util.Li ...