1. Jquery Ajax简介
Jquery对Ajax操作封装了一套跨浏览器，方便用户使用的Api
2. Jquery Ajax Load方法
远程请求，把请求的数据载入到DOM里；
load(url , [,data] , [,callback])
Url:请求地址
Data:请求参数
Callback:请求完成后的回调方法
3. jquery Ajax Get/Post方法
Ajax请求后台；
$.post(URL,data,callback);
Url:请求地址
Data:请求参数
Callback:请求完成后的回调方法
chap06/demo01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
$("#d1").load("/HeadFirstJquery/ajax?action=load",{name:"张三",age:14},function(){
alert("执行完成");
});
});
$("#b2").click(function(){
$.post("/HeadFirstJquery/ajax?action=post",{id:1},function(data,textStatus){
alert("请求状态："+textStatus);
alert("返回数据："+data);
data=eval("("+data+")");
$("#name").val(data.name);
$("#age").val(data.age);
});
});
});
</script>
</head>
<body>
<input id="b1" type="button" value="Load加载"/>
<div id="d1"></div>
<hr/>
<input id="b2" type="button" value="Post/Get加载"/><br/>
姓名：<input type="text" id="name"/><br/>
年龄：<input type="text" id="age"/>
</body>
</html>
Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>HeadFirstJquery</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>ajaxServlet</servlet-name>
<servlet-class>com.andrew.web.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxServlet</servlet-name>
<url-pattern>/ajax</url-pattern>
</servlet-mapping>
</web-app>
AjaxServlet.java
package com.andrew.web;
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 AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String action = request.getParameter("action");
if ("load".equals(action)) {
this.load(request, response);
} else if ("post".equals(action)) {
this.post(request, response);
}
}
private void load(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name:" + name);
System.out.println("age:" + age);
PrintWriter out = response.getWriter();
out.println("jquery Ajax 大爷你好");
out.flush();
out.close();
}
private void post(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String id = request.getParameter("id");
System.out.println("id:" + id);
PrintWriter out = response.getWriter();
out.println("{name:'张三',age:14}");
out.flush();
out.close();
}
}
http://localhost:8080/HeadFirstJquery/chap06/demo01.html
分享到：
相关推荐
**jQuery AJAX分页技术详解** 在Web开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高页面加载速度，优化用户体验。jQuery，一个轻量级、功能丰富的JavaScript库，结合AJAX（异步JavaScript和...
【ASP + jQuery AJAX 实例源码详解】 ASP (Active Server Pages) 是微软开发的一种服务器端脚本语言，常用于构建动态网页。jQuery 是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及AJAX交互。AJAX...
在jQuery库中，AJAX功能被简化并封装成了易于使用的API。`$.ajax()`是jQuery提供的核心AJAX函数，它允许我们配置各种选项来定制请求，如URL、请求类型（GET或POST）、数据类型（JSON、XML、HTML等）以及请求成功或...
"jqueryAjax_无刷新调用另一页实例"这个标题意味着我们将探讨如何利用jQuery的AJAX功能实现页面的动态加载。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及AJAX交互。...
**jQuery AJAX 前后台数据传输详解** 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。jQuery库为开发者提供了简单易用的...
在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery的ajax方法来提交表单，从而实现异步数据交换，提高用户体验。 首先，jQuery的...
在这个"JqueryAjax简单实例"中，我们主要关注如何在Visual Studio 2005 C#环境下利用jQuery实现AJAX的功能。首先，我们需要确保项目中已经引入了jQuery库。这通常通过在HTML头部添加jQuery库的CDN链接或者将jQuery....
**jQuery Ajax过滤器详解** 在Web开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于页面异步更新，提供更流畅的用户体验。jQuery库简化了Ajax操作，它内置了一系列强大的Ajax方法，其中包括Ajax...
在网页开发中，jQuery AJAX 是一种非常重要的技术，它允许前端和后端进行异步通信，无需刷新整个页面。无刷验证（又称实时验证或AJAX验证）是这种技术的一个典型应用，它提高了用户体验，因为在用户输入数据时，可以...
### jQuery AJAX 源代码分析 #### 一、概述 jQuery 是一款优秀的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载...
本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例，实现前端通过jQuery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端，有兴趣的可以了解一下。
《jQuery AJAX 技术详解——基于传智播客课件》 在当今的Web开发中，jQuery AJAX（异步JavaScript和XML）技术扮演着至关重要的角色。它允许开发者在不刷新整个页面的情况下与服务器进行数据交换，提高了用户体验，...
在IT行业中，Spring MVC和jQuery AJAX是两种广泛使用的技术，它们在构建现代Web应用程序时起着关键作用。本文将深入探讨如何在Spring MVC框架中利用jQuery的AJAX功能进行前后端交互，提升用户体验。 首先，Spring ...
在Web开发中，jQuery AJAX是实现页面数据动态更新的关键技术，尤其在构建交互性强的Web应用时不可或缺。AJAX（Asynchronous JavaScript and XML）允许在不刷新整个页面的情况下与服务器交换数据并局部更新页面，提高...
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...
在标题“vue基本环境+jquery ajax应用”中，我们可以理解为这个压缩包可能包含了一个基本的Vue开发环境，并展示了如何结合jQuery的AJAX功能来处理数据请求。 Vue的基本环境通常包括Vue的核心库、Vue CLI（命令行...
jquery ajax 异步传值并把值赋予在div标签内 很简单的jquery ajax异步传值 让您清楚了解jquery ajax运作 点击按钮的时候 程序会通过ajax去获取某个PHP文件的输出值 获取PHP文件的输出值的那一刻下面的程序会继续执行...
在本文中，我们将深入探讨如何使用Jquery Ajax技术来实现一个简易计算器。Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。结合Jquery库，我们可以...
Java程序与jQuery AJAX的结合是Web开发中常见的一种技术组合，用于实现页面的无刷新更新。在本篇文章中，我们将深入探讨如何在Java后端与前端利用jQuery的AJAX功能进行交互，提升用户体验。 首先，jQuery是一个强大...
在给定的标题和描述中，主要涉及两个关键知识点：使用jQuery的AJAX方法读取TXT文件和实现jQuery分页功能。接下来，我们将深入探讨这两个主题。 首先，我们来讨论如何使用jQuery的AJAX方法读取TXT文件。AJAX（异步...