目录 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. Problem 2169 shadow

     Problem 2169 shadow Accept: 141    Submit: 421 Time Limit: 1000 mSec    Memory Limit : 32768 KB  Pr ...

  2. AFNetWorking 提交 NSArray 类型参数 取不到值的解决办法

    在使用AFNWorking 提交参数的时候, 其中包含NSArray类型的参数, 但是后台可以接收到普通int, string 类型的参数,就是接收不到array类型的, google后发现原来AFN ...

  3. JVM 重排序

    在java代码到最终执行的指令序列的整个过程中,会出现重排序.也就是说最终执行的顺序并不是按照源代码执行的顺序来进行的. 其中1为编译器的优化重排序,2,3是处理器的重排序. 数据依赖 如果两个操作访 ...

  4. 为什么要用BASE64

    BASE64和其他相似的编码算法通常用于转换二进制数据为文本数据,其目的是为了简化存储或传输.更具体地说,BASE64算法主要用于转换二进 制数据为ASCII字符串格式.Java语言提供了一个非常好的 ...

  5. Android Studio apk 打包流程

    1.Build -> Generate Signed APK...,打开如下窗口 2.假设这里没有打过apk包,点击Create new,窗口如下 这里只要输入几个必要项 Key store p ...

  6. Android学习笔记：ListView简单应用--显示文字列表

    在activity中的编写如下代码: final List<String> items = new ArrayList<String>(); //设置要显示的数据,这里因为是例 ...

  7. 基于visual Studio2013解决算法导论之025双向循环链表

     题目 双向循环链表 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <time.h> #in ...

  8. 十进制字符串转成二进制（decimal to binary）

    题目:给一个十进制的字符串例如1.25, 将其转化为二进制字符串,这个例子的结果是1.01 = 1*2^0 + 0*2^(-1) + 1*2^(-2) = 1.25. 如果不能完整的用二进制表示,输出 ...

  9. 达内TTS6.0课件basic_day05

  10. Java 找出四位数的全部吸血鬼数字 基础代码实例

    /**  * 找出四位数的全部吸血鬼数字  * 吸血鬼数字是指位数为偶数的数字,能够由一对数字相乘而得到,而这对数字各包括乘积的一半位数的数字,当中从最初的数字中选取的数字能够随意排序.  * 以两个 ...