目录 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. applicationContext.xml详解

    http://blog.csdn.net/heng_ji/article/details/7022171

  2. USACO Hamming Codes DFS 构造

    我还是用了很朴素的暴力匹配A了这题,不得不感叹USACO时间放的好宽... /* ID: wushuai2 PROG: hamming LANG: C++ */ //#pragma comment(l ...

  3. 简单实用的下拉菜单（CSS+jquery）

    原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  4. W3C 、HTML 、CSS 发展介绍

    一.W3C W3C 指万维网联盟(World Wide Web Consortium),创建于1994年10月,由 Tim Berners-Lee (他是html的发明人)创建. W3C开始被创建的目 ...

  5. 使用jquery获取ul的li的值赋值

    jquery:$('#dropdownMenu1').val(str);不jquery:document.getElementById('dropdownMenu1').value = str;

  6. 基于visual Studio2013解决C语言竞赛题之0525拉丁方阵

     题目

  7. 进入MFC讲坛的前言(二)

    MFC的WinMain 使用MFC编程的程序员刚开始都会提出这样一个问题:我的程序是从哪儿开始执行的?回答是:从WinMain()开始执行的.提出这样的问题是由于在他们所编写的MFC应用中看不到Win ...

  8. SVN - 笔记

    SVN(版本控制) 1.什么是SVN · 多人共同开发同一个项目,内部最大的问题是,在比较短的时间内如果有多人同时开发同一个文件,会造成彼此的代码相互覆盖的情况发生. · 管理着随时间改变的数据,这些 ...

  9. 常见的transformation 和 Action

    常见transformation map 将RDD中的每个元素传入自定义函数,获取一个新的元素,然后用新的元素组成新的RDD filter 对RDD中每个元素进行判断,如果返回true则保留,返回fa ...

  10. ACM比赛（第二次A）

    ime Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Description There is ...