1. jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。//这个就是往服务器传数据的

可选的 callback 参数是 load() 方法完成后所执行的函数名称。//

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

实例

$("#div1").load("demo_test.txt #p1");

2. jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

 

首先要了解什么是 HTTP？

超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。

HTTP 的工作方式是客户机与服务器之间的请求-应答协议。

Web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

举例：客户端（浏览器）向服务器提交 HTTP请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

还有get（）和post（）的区别

·  GET 请求可被缓存

·  GET 请求保留在浏览器历史记录中

·  GET 请求可被收藏为书签

·  GET 请求不应在处理敏感数据时使用

·  GET 请求有长度限制

·  GET 请求只应当用于取回数据

·  POST 请求不会被缓存

·  POST 请求不会保留在浏览器历史记录中

·  POST 不能被收藏为书签

·  POST 请求对数据长度没有要求

 

GET

POST

后退按钮/刷新

无害

数据会被重新提交（浏览器应该告知用户数据会被重新提交）。

书签

可收藏为书签

不可收藏为书签

缓存

能被缓存

不能缓存

编码类型

application/x-www-form-urlencoded

application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。

历史

参数保留在浏览器历史中。

参数不会保存在浏览器历史中。

对数据长度的限制

是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。

无限制。

对数据类型的限制

只允许 ASCII 字符。

没有限制。也允许二进制数据。

安全性

与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。

在发送密码或其他敏感信息时绝不要使用 GET ！

POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。

可见性

数据在 URL 中对所有人都是可见的。

数据不会显示在 URL 中。

例子get：

<script>

$(document).ready(function(){

$("button").click(function(){

$.get("/example/jquery/demo_test.asp",function(data,status){

alert("数据：" + data + "\n状态：" + status);

});

});

});

</script>

<%
response.write("This is some text from an external ASP file.")
%>

结果会出来：

"数据：This is some text from an external ASP file.  状态：success

Post例子：

就用servlet吧。

第一个是MyServlet.Java

package com.fish;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class MyServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

PrintWriter out = response.getWriter();

System.out.println(request.getParameter("name"));//这个等会从juqery里面获取

System.out.println(request.getParameter("text"));

out.print("aa");

out.print("bb");

//

}

}

然后将1.9的js框架导入，

在jsp这么写

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

<%

String path = request.getContextPath();

String basePath = request.getScheme() +"://"

+ request.getServerName() +":" + request.getServerPort()

+ path + "/";

%>

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

<html>

<head>

<basehref="<%=basePath%>">

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

<scripttype="text/javascript"src="jquery-1.9.1.js"></script>//放入js框架

<scripttype="text/javascript">

$(document).ready(function() {

$("p").click(function() {

$.post("servlet/MyServlet",         //这个是MyServlet的路径

{

name:"你好",                                //第二个是以json格式的传值，和上面servet的名相同，这样就可以传到服务器。

text:"我是千岛飞鱼"

},

function(data,status){                   //从服务器读的内容会在data里面。Status这个读取的状态

alert("Data: " + data +"\nStatus: " + status);

});

});

});

</script>

</head>

<body>

<p>点击我</p>

</body>

</html>

所以结果在eclispe控制台会显示：你好我是千岛飞鱼。

在浏览器会弹出：Data:aabb   Status:sucess

利用jquery对ajax操作，详解原理（附代码）的更多相关文章

  1. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  2. 触碰jQuery：AJAX异步详解（转）

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  3. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  4. jQuery中 $.ajax()方法详解

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

  5. Jquery使用ajax参数详解

    记录一下  Jquery使用ajax(post.get及参数详解) 1.get: $.ajax({ type: "GET", url: baseUrl + "Showco ...

  6. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  7. Jquery的AJAX应用详解

    案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id=" ...

  8. jquery datatable ajax配置详解

    我写的这个东西类似于个人笔记,如果你想要完整的而了解 可以去这里看看 http://dt.thxopen.com/ 包括英文原网站都不错. 通过配置ajax的属性和服务器交互 $("sele ...

  9. jQuery之$.ajax()方法详解及实例

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

随机推荐

  1. 前端构建利器Grunt—Bower

    runt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...

  2. [SQL]死锁处理语句

    原文:[SQL]死锁处理语句 引言 今天在群里看到分享的解决死锁的sql语句,就想着这东西以后肯定用的着,就下载下来,在这里记录一下,以后查找也方便. SQL SET QUOTED_IDENTIFIE ...

  3. 为Pythonic论坛添加一个“专题”功能

    代码还没读完就踏上了修改功能的深坑.还好思路清晰,通过修改模板和视图,实现了专题模块 原论坛的模式是用户点击节点发帖,然后就归到节点的分类里面了.我需要一个功能,就是右侧需要一个专题区,管理员发帖的话 ...

  4. Android使用OpenGL ES2.0显示YUV，您的手机上的数据要解决两个方面的坐标

    如果说 ,我不知道,如果你不明白这个话题.连接到:http://blog.csdn.net/wangchenggggdn/article/details/8896453(下称链接①), 里面评论有非常 ...

  5. Inno Setup技巧[界面]欢迎页面上添加文字

    原文:Inno Setup技巧[界面]欢迎页面上添加文字 本文介绍在"欢迎页面添加文字"的两种方法. 界面预览: Setup技巧[界面]欢迎页面上添加文字" title= ...

  6. web开发中的多线程死锁问题，避免死锁

    1.什么是死锁,产生死锁的原因,和产生死锁的必要条件 所谓死锁(DeadLock),是指多个进程或线程在运行过程中因争夺资源而造成的一种僵局,当进程或线程处于僵局时,若无外力作用,它们将无法再向前推进 ...

  7. 使用WCF订阅替换轮训

    之前因为某些特定岗位的人不知道是不方便还是什么的原因,所以随便做了个独立于所有系统之外的邮件审批服务,功能是那些人在邮件里给待审批单据发个“同意”就自动审批通过,大致分为3部分:第一部分每隔固定时间去 ...

  8. Controller 的 Action 只接受 Ajax 请求

    ASP.NET MVC 使 Controller 的 Action 只接受 Ajax 请求. 2014-08-27 14:19 by h82258652, 555 阅读, 2 评论, 收藏, 编辑 首 ...

  9. 《C语言 学生成绩管理系统》

    /* (盯着先拔头筹程序) * 该计划的版权声明和版本号 * Copyright (c) 2011, 烟台大学计算机学院学生的学校 * All rights reserved. * 文件名: 学生成绩 ...

  10. C#动态表达式计算(续1)

    距上一帖近五天时间,让大家久等了,没想到关注这个话题的也不少人,正如有同志所说的想解决该问题其实是有太多的解决方法,比如动态构造类编译.调用vbscript或者可以采用javascript解析引擎或者 ...