Ajax第二天——JQuery的Ajax

时间:2022-09-13 22:40:03

  JQuery中的Ajax

      jQuery 对 Ajax 操作进行了封装,

    在 jQuery 中最底层的方法是 $.ajax(),

    第二层是 load(), $.get() 和 $.post(), (常用)

    第三层是 $.getScript() 和 $.getJSON()

  更详尽的介绍请参见API

  什么是回调函数:

  这里先引用知乎网友对回调的生动形容,后续概念不再赘述回调函数概念

    你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,
    过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。
    在这个例子里,你的电话号码就叫回调函数,
    你把电话留给店员就叫登记回调函数,
    店里后来有货了叫做触发了回调关联的事件,
    店员给你打电话叫做调用回调函数,
    你到店里去取货叫做响应回调事件。
  链接:https://www.zhihu.com/question/19801131/answer/13005983
  相对正式专业的回答参见:http://www.jb51.net/article/54750.htm
 
  先来看底层的$.ajax()方法:
 
    此方法只接收一个参数,参数可能的键值对参见:http://www.runoob.com/jquery/ajax-ajax.html
  看实例:
<span style="font-size:18px;">          // 删除
$.ajax({
type : "POST", //提交方式
url : "${pageContext.request.contextPath}/org/doDelete.action",//路径
data : {
"org.id" : "${org.id}"
},//数据,这里使用的是Json格式进行传输
success : function(result) {//返回数据根据结果进行相应的处理
if ( result.success ) {
$("#tipMsg").text("删除数据成功");
tree.deleteItem("${org.id}", true);
} else {
$("#tipMsg").text("删除数据失败");
}
}
});
</span>

   data:传输的数据,主要方式有三种,html拼接的,json数组,form表单经serialize()序列化(见SSM-CRUD实例)的;通过dataType指定,不指定智能判断

 这里可以参见网友的:http://www.cnblogs.com/my-effort/p/6307303.html

  【更新】:ajax的其他属性设置请参见文档:http://tool.oschina.net/apidocs/apidoc?api=jquery

  例如async属性:

      ajax是异步的,不会阻塞后续代码执行,你要阻塞就改为同步的,这些都是底层的知识,所以要先学底层

$.ajax({
    async:false,
  type: 'POST'
    ...
   $.load()方法

    load() 方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中.

    它的结构是: load(url[, data][,callback])

Ajax第二天——JQuery的Ajax

    程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

  testload.jsp

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
//使用load方法处理ajax
var url=this.href;
var args={"time":new Date()};
$("#content").load(url,args);
return false;
});
});
</script>
</head> <body>
<a href="helloAjax.txt">hello ajax</a>
<div id="content"></div>
</body>
</html>

  任何一个HTML结点都可以使用load()方法来加载ajax,结点直接插入到html中

   $.get() 和 $.post()方法 

    $.get() 方法使用 GET 方式来进行异步请求.

    它的结构是: $.get(url[, data][, callback][, type]);

Ajax第二天——JQuery的Ajax

    $.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等;

    textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.

    注意type若自动填写了会严格强制按照指定类型执行,一般的Jquery的ajax是智能判断的

    $.get() 和 $.post() 方法时 jQuery 中的全局函数, 而 load() 等方法都是对 jQuery 对象进行操作的方法,两个方法类同,不再赘述

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url=this.href;
var args={"time":new Date()};
$.get(url,args,function(data){
var name=$(data).find("name").text();
var email=$(data).find("email").text();
var website=$(data).find("website").text();
$("#details").empty()
.append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
.append("<a href='"+website+"'>"+website+"</a>");
});
return false; });
})
</script>
</head> <body>
<h1>People</h1>
<ul>
<li><a href="files/andy.xml">Andy</a></li>
<li><a href="files/richard.xml">Richard</a></li>
<li><a href="files/jeremy.xml">Jeremy</a></li>
</ul>
<div id="details"></div>
</body>
</html>

 //其中的function是回调函数,当响应结束时,回调函数被触发,响应结果在data中

  testgetJSON 测试JSON数据格式

  注:

    "{result:{\"success\":\"true\",\"meg\":\"success\"}}"
    "{\"success\":true,\"mesg\":\"success\"}"

  对比两条JSON字符串,其中bool值是不需要加引号的,并且指定了JSON的type后,JSON格式变得更加严格,单引号或者不加引号都是严禁的。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
//url:ajax请求的目标url
//args:传递的参数:json类型
//data:ajax响应成功后的数据,可能是xml,html,json
$(function(){
$("a").click(function(){
var url=this.href;
var args={"time":new Date()};
$.getJSON(url,args,function(data){
var name=data.person.name;
var email=data.person.eamil;
var website=data.person.website;
$("#details").empty()
.append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
.append("<a href='"+website+"'>"+website+"</a>");
});
return false; });
})
</script>
</head> <body>
<h1>People</h1>
<ul>
<li><a href="files/andy.js">Andy</a></li>
<li><a href="files/richard.js">Richard</a></li>
<li><a href="files/jeremy.js">Jeremy</a></li>
</ul>
<div id="details"></div>
</body>
</html>

 

  

  更多实例请参见jQuery Ajax的API Ajax 部分http://tool.oschina.net/apidocs/apidoc?api=jquery

  典型应用举例

  1.校验用户名是否被占用
  jsp页面:index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!-- 注意此处src的写法 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
/*
导入库
获取name结点
为结点添加change()事件
获取结点的value值,进行校验
此处直接返回HTML片段,在客户端浏览器可以查看如红色加粗提示效果
*/
$(function(){
$(":text[name='username']").change(function(){
var val = $(this).val();
val = $.trim(val);
if(val != ""){
var url = "${pageContext.request.contextPath }/validateUsername";
var args = {"username":val,"time":new Date()};
$.post(url,args,function(data){
$("#message").html(data);
});
}
});
})
</script> </head> <body>
<form action="" method="post">
UserName:<input type="text" name="username"/>
<br/>
<div id="message"></div>
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

  //注意点:项目名的写法,servlet的路径的匹配

  servlet页面

package cn.servlet;

import java.io.IOException;
import java.util.Arrays;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class validataUsernameServlet
*/
public class validataUsernameServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public validataUsernameServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<String> list = Arrays.asList("aaa","bbb","ccc");
String username = request.getParameter("username");
String result = null;
if(list.contains(username)){
result = "<font color='red'>该用户名已经被使用</font>";
}else{
result = "<font color='green'>该用户名可以使用</font>";
}
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
response.getWriter().print(result);
} }

  //注意点:创建servlet时的路径写法,设置编码

   2.添加商品
   jsp页面:index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!--
1.获取当前页面所有的a节点,并为每一个a节点都添加onclick响应函数,同时取消其默认行为
2.准备发送Ajax请求:Url(a节点的href属性值);args(时间戳)
3.响应为一个json对象,包括:bookName,totalBookNumber,totalMoney
4.把对应的属性添加到对应的位置
--> <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
var isHasCart="${sessionScope.sc==null}";
//alert(isHasCart);
if(isHasCart){
$("#cartstatus").hide();
}else{
$("#cartstatus").show();
$("#bookName").text("${sessionScope.sc.bookName}");
$("#totalBookNumber").text("${sessionScope.sc.totalBookNumber}");
$("#totalMoney").text("${sessionScope.sc.totalMoney}");
}
$("a").click(function(){
$("#cartstatus").show();
var url = this.href;
var args = {"time":new Date()}
$.getJSON(url,args,function(data){
$("#bookName").text(data.bookName);
$("#totalBookNumber").text(data.totalBookNumber);
$("#totalMoney").text(data.totalMoney);
});
return false;
});
}) </script>
</head> <body>
<div id="cartstatus">
您已经将&nbsp;<span id="bookName"></span>&nbsp;加入到购物车中,
购物车中的书有&nbsp;<span id="totalBookNumber"></span>&nbsp;本,
总价格&nbsp;<span id="totalMoney"></span>&nbsp;钱
</div> <br/><br/>
Java<a href="${pageContext.request.contextPath}/AddToCart?id=Java&price=300">加入购物车</a>
<br/><br/>
Oracle<a href="${pageContext.request.contextPath}/AddToCart?id=Oracle&price=200">加入购物车</a>
<br/><br/>
Struts2<a href="${pageContext.request.contextPath}/AddToCart?id=Struts2&price=100">加入购物车</a>
<br/><br/>
</body>
</html>

  servlet页面

package cn.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession; import cn.bean.ShoppingCart; /**
* Servlet implementation class AddToCartServlet
*/
public class AddToCartServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public AddToCartServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获取请求参数 id,price
String bookName = request.getParameter("id");
int price = Integer.parseInt(request.getParameter("price"));
//2.获取购物车对象
HttpSession session = request.getSession();
ShoppingCart sc = (ShoppingCart) session.getAttribute("sc");
//session中无购物车则创建一辆车给他,并放在session中
if(sc == null){
sc = new ShoppingCart();
session.setAttribute("sc", sc);
}
//3.把点击的选项加入到购物车中
sc.addToCart(bookName, price);
//4.准备响应的json对象
StringBuilder sb = new StringBuilder();
sb.append("{")
.append("\"bookName\":\""+bookName+"\"")
.append(",")
.append("\"totalBookNumber\":"+sc.getTotalBookNumber())
.append(",")
.append("\"totalMoney\":"+sc.getTotalMoney())
.append("}");
//5.响应json对象
response.setContentType("text/javascript");
response.getWriter().print(sb.toString());
} }

  ShoppingCart

package cn.bean;

import java.util.HashMap;
import java.util.Map; public class ShoppingCart { //存放shoppingcartitem的map 键:书名 值:shoppingcartitem对象
private Map<String, ShoppingCartItem> items=new HashMap<String, ShoppingCartItem>();
private String bookName;
public void addToCart(String bookName,int price){
this.bookName=bookName;
if(items.containsKey(bookName)){
ShoppingCartItem item=items.get(bookName);
item.setNumber(item.getNumber()+1);
}else{
ShoppingCartItem item=new ShoppingCartItem();
item.setBookName(bookName);
item.setPrice(price);
item.setNumber(1);
items.put(bookName, item);
}
}
public int getTotalBookNumber(){
int total=0;
for(ShoppingCartItem item:items.values()){
total+=item.getNumber();
}
return total;
}
public int getTotalMoney(){
int money=0;
for(ShoppingCartItem item:items.values()){
money+=item.getNumber()*item.getPrice();
}
return money;
}
public String getBookName() {
return bookName;
}
}

  ShoppingCartItem

package cn.bean;

public class ShoppingCartItem {

    private int number;
private String bookName;
private int price;
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
public String getBookName() {
return bookName;
}
public void setBookName(String bookName) {
this.bookName = bookName;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
} }

  使用Jackson后的servlet:(Jackson简单入门见另一篇随笔)

package cn.ajax.servlet;

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;
import javax.servlet.http.HttpSession; import org.codehaus.jackson.map.ObjectMapper; import cn.itcast.beans.ShoppingCart; public class AddToCart extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1.获取请求参数 id,price
String bookName=request.getParameter("id");
int price=Integer.parseInt(request.getParameter("price"));
System.out.println(bookName);
//2.获取购物车对象
HttpSession session=request.getSession();
ShoppingCart sc=(ShoppingCart) session.getAttribute("sc");
if(sc==null){
sc=new ShoppingCart();
session.setAttribute("sc", sc);
}
//3.把点击的选项加入到购物车中
sc.addToCart(bookName, price);
//4.准备响应的json对象
// StringBuilder result=new StringBuilder();
// result.append("{")
// .append("\"bookName\":\""+bookName+"\"")
// .append(",")
// .append("\"totalBookNumber\":"+sc.getTotalBookNumber())
// .append(",")
// .append("\"totalMoney\":"+sc.getTotalMoney())
// .append("}");
ObjectMapper mapper=new ObjectMapper();
String result=mapper.writeValueAsString(sc);
System.out.println(result);
//5.响应json对象
response.setContentType("text/javascript");
//response.getWriter().print(result.toString());
response.getWriter().print(mapper.writeValueAsString(sc));
} }

   结果演示:

Ajax第二天——JQuery的Ajax

Ajax第二天——JQuery的Ajax的更多相关文章

  1. Ajax:后台jquery实现ajax无刷新删除数据及demo

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAFSCAIAAAChUmFZAAAgAElEQVR4nO29z4scWZbn2/+Hb30zi8

  2. Ajax -异步请求 -jquery中ajax分类 -第一层 &dollar;&period;ajax -第二层&lpar;&dollar;&period;get &sol;&dollar;&period;post&rpar; -第三层&lpar;&dollar;&period;getJson&sol;&dollar;&period;getScript&rpar; -相应演示

    Ajax 1.标准请求响应时浏览器的动作(同步操作) 1.1浏览器请求什么资源,跟随显示什么资源2.ajax:异步请求. 2.1局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内 ...

  3. Ajax 原生和jQuery的ajax用法

    https://www.cnblogs.com/jach/p/5709175.html form数据的序列化: $('#submit').click(function(){ $('#form').se ...

  4. JavaScript封装Ajax(类JQuery中&dollar;&period;ajax&lpar;&rpar;方法)

    ajax.js (function(exports, document, undefined){ "use strict"; function Ajax(){ if(!(this ...

  5. Ajax学习系列——jQuery中Ajax的请求方式

    在jQuery中,Ajax常见的请求方式主要有4种. 1.$.ajax()返回其创建的XMLHttpRequest对象. $.ajax({ type:"POST", content ...

  6. 【JAVAWEB学习笔记】28&lowbar;jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

  7. 《锋利的JQuery》读书要点笔记5——jQuery与Ajax的应用

    第6章 jQuery与Ajax的应用 Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的 ...

  8. Ajax&lowbar;使用 jQuery 实现Ajax

    [jQuery中的Ajax] 1.jQuery对Ajax操作进行了封装,在jQuery中最底层的方法时 $.ajax().第二层是 load() , $.get()  和 $.post(),第三层是 ...

  9. js进阶 14 jquery的ajax有哪些函数和事件(多练)

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

随机推荐

  1. webmagic 增量爬取

    webmagic  是一个很好并且很简单的爬虫框架,其教程网址:http://my.oschina.net/flashsword/blog/180623 webmagic参考了scrapy的模块划分, ...

  2. Yii2&period;0 用户登录详解(上)

    一.准备 在开始编写代码之前,我们需要思考一下:用户登陆模块,实现的是什么功能?很明显,是登陆功能,那么,登陆需要用户名和密码,我们在数据库的一张表中就应该准备好用户名和密码的字段,再思考一下,如果要 ...

  3. Java令牌生成器

    package Token; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; im ...

  4. sql查询字段值的换行及回车符

    SQL的换行.回车符,在MySQL.SQL Server和Oracle中均有不同,下面以列表显示.   MySQL SQL Server Oracle 换行符 \n或\r\n或CHAR(10) CHA ...

  5. 迷你MVVM框架 avalonjs 0&period;81发布

    本版本最大的改进是将视图的操作全鄣变成异步.详情如下: 管道符与短路与相混淆的BUG 重构on绑定,省得每次都重复绑定同一个事件回调.虽然addEventListener或attachEvent会忽略 ...

  6. spoj 3885

    简单的博弈题,用dp解: 每个人只能拿1,l,k个硬币: dp[i][j]表示第j个人拿是否能拿第i枚硬币: 代码: #include<cstdio> #define maxn 10000 ...

  7. Qt 状态机框架学习(没学会)

    Qt状态机框架是基于状态图XML(SCXML) 实现的.从Qt4.6开始,它已经是QtCore模块的一部分.尽管它本身是蛮复杂的一套东西,但经过和Qt的事件系统(event system).信号槽(s ...

  8. 蜘蛛牌 &lpar;DFS&rpar;

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1584 全部状态都判断一遍 代码: #include <stdio.h> #include ...

  9. Flex在使用无线电的button切换直方图横坐标和叙述性说明

    1.问题叙述性说明 一组单选button,有周和月之分,选择"周",柱状图横坐标显示的是周,纵坐标显示的是人数:选择"月",柱状图横坐标显示的月,纵坐标显示的是 ...

  10. moodle3&period;15&plus;&comma;mysql完全的Unicode支持配置

    https://docs.moodle.org/dev/Releases,moodle个版本升级的主要内容和改动 在windows是mysql.ini  linux 下是mysql.cnf 因为MyS ...