jQuery 第六章 jQuery在Ajax应用
1.本章目标
ajax
2.ajax
异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互
用户体验好
地图,前台验证,表单提交,修改,查询等等
原生的js和ajax
package com.servlet; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class Ajaxservlet
*/
@WebServlet(name="Ajaxservlet",urlPatterns="/Ajaxservlet")
public class Ajaxservlet extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//中文乱码处理
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//获取前端请求过来的参数,name
String name=request.getParameter("name");
System.out.println(name);
if(name!=null&&"admin".equals(name)){
response.getWriter().write("成功");
}else{
response.getWriter().write("失败");
} } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
servlet
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
function ceshi(){
//获取文本框的数据
var v = document.getElementById("uid").value
//创建xml对象
var xmlHttp=new XMLHttpRequest();
//打开请求,第一个参数:提交方式,第二个参数:请求路径,第三个参数,是否异步
xmlHttp.open("Get","http://localhost:8080/jquery-chapter6-ajax/Ajax.jsp?name="+v,true);
//设置回调函数
xmlHttp.onreadystatechange = function(){
//判断状态
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//成功之后获取服务端响应回来的数据
//var txt = xmlHttp.responseText;
alert(xmlHttp.responseText) } }
//发送请求
xmlHttp.send(null)
}
</script>
</head>
<body>
<input id="uid" />
<button onclick="ceshi()">发送ajax请求到后台交互</button>
</body>
</html>
ajax的原生异步
jquery的ajax
判断账号密码输入正确 错误
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
//获取输入框的值
var name=$("#uid").val();
var pwd=$("#pid").val();
//jquery-ajax
$.ajax({
async:true,//表示请求是否异步处理。默认是 true。
cache:false,//表示浏览器是否缓存被请求页面。默认是 true。
data:'uname='+name+'&pname='+pwd,//规定要发送到服务器的数据。
dataType:'text',//预期的服务器响应的数据类型。
type:'post',//请求方式,默认:get
url:'demo1Servlet',//请求路径
success:function(data){ //请求成功后的回调函数 data时服务端的响应数据,形参名(自定义)
alert(data);
},
//请求失败后的回调函数
error:function(){
alert('ajax请求失败');
},
//请求完成后的回调函数,无论成功还是失败都回调
complete:function(){
alert('ajax请求完成');
} })
}) }) </script>
</head>
<body>
<form>
账号:<input id="uid"/><br/>
密码:<input id="pid"/><br/>
</form>
<button>发送ajax请求</button>
</body>
</html>
demo1 jsp
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet(name="Demo1Servlet",urlPatterns="/demo1Servlet")
public class Demo1Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//中文乱码处理
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//获取请求参数
String uname=request.getParameter("uname");
String pname=request.getParameter("pname");
System.out.println(uname+pname);
//模拟数据库的验证
if("zhangsan".equals(uname)&&"123456".equals(pname)){
response.getWriter().write("正确");
}else{
response.getWriter().write("错误");
}
} }
demo1servlet
简洁版ajax 取uname pname 必须和后台取页面 相同 .serialize()
$.ajax({
type:'post',//请求方式,默认:get
url:'demo1Servlet',//请求路径
data:$("#myform").serialize(),
success:function(data){ //请求成功后的回调函数 data时服务端的响应数据,形参名(自定义)
alert(data);
}
})
简洁版ajax
家庭作业:::::::前端，通过jquery ajax请求servlet，获取到json字符串数据，然后在前端进行解析，展示到页面中（自行百度）
在后台 取到json数据 展示到前台表格里 需要在里面设置
response.setContentType("application/json;charset=utf-8");
具体前后台代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
width: 480px;
height: 200px;
border-collapse: collapse;
}
table tr th,td{
border-collapse: collapse;
border: 1px solid darkgoldenrod;
text-align: center;
}
table td{
width:160px;
height: 50px;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
//发送ajax请求
$.ajax({
type:"post",
url:"homeworkServlet",
success:function(data){
//把响应的数据转为json对象
//var u= JSON.parse(data);
var u=data;
for(var i=0;i<u.length;i++){
var tr= "<tr>";
tr+="<td>"+u[i].name+"</td>";
tr+="<td>"+u[i].sex+"</td>";
tr+="<td>"+u[i].age+"</td>";
tr+="</tr>";
$("table").append($(tr));
}
}
})
})
</script>
</head>
<body>
<table border="1px" id="tab">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table> </body>
</html>
前台
import java.io.IOException;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; @WebServlet(name="HomeworkServlet",urlPatterns="/homeworkServlet")
public class HomeworkServlet extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//中文乱码处理
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
//获取请求参数
Demo demo=new Demo();
List<User> list=demo.getinfo();
//创建gson对象
Gson gson = new Gson();
String json = gson.toJson(list);
response.getWriter().write(json); } }
后端servlet
import java.util.ArrayList;
import java.util.List; import com.google.gson.Gson;
import com.sun.xml.internal.bind.v2.runtime.unmarshaller.XsiNilLoader.Array; public class Demo {
public static List<User> getinfo(){
List<User> list = new ArrayList<>();
for(int i=1;i<=5;i++){
User u = new User(i, "张三"+i,"男",16);
list.add(u);
Gson gson = new Gson();
String json = gson.toJson(list);
}
return list;
}
public static void main(String[] args) {
List<User> list=getinfo();
//把list集合转为json字符串
//创建gson对象
Gson gson = new Gson();
String json = gson.toJson(list);
System.out.println(json);
//家庭作业
//前端，通过jquery ajax请求servlet，获取到json字符串数据，然后在前端进行解析，展示到页面中（自行百度）
}
}
class User{
private int id;
private String name;
private String sex;
private int age;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
} public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public User(int id, String name, String sex, int age) {
super();
this.id = id;
this.name = name;
this.sex = sex;
this.age = age;
}
}
创建 信息 以及实体类
jquery.post(提交方法)
$.post('demo3Servlet',{uname:uname,pname:pname},function(data){
alert(data);
})
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet(name="Demo3Servlet",urlPatterns="/demo3Servlet")
public class Demo3Servlet extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//中文乱码处理
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//获取请求参数
String uname=request.getParameter("uname");
String pname=request.getParameter("pname");
System.out.println(uname+pname);
//模拟数据库的验证
if("zhangsan".equals(uname)&&"123456".equals(pname)){
response.getWriter().write("正确");
}else{
response.getWriter().write("错误");
}
}
}
jquery post提交方法 servlet
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function() {
$("button").click(function(){
//第一个参数 请求路径
//第二个参数 请求参数,格式,键值对
//第三个就是回调函数,函数data就是服务的相应的数据
var uname=$("#uid").val();
var pname=$("#pid").val();
$.post('demo3Servlet',{uname:uname,pname:pname},function(data){ alert(data);
}) })
})
</script>
</head>
<body>
<form id="myform">
账号:<input id="uid" name="uname"/><br/>
密码:<input id="pid"/ name="pname"><br/>
</form>
<button>发送ajax请求</button>
</body>
</html>
jquery post 提交方法 jsp页面
jquery.getJSON()方法
$.getJSON('homeworkServlet',{},function(data){
//把响应的数据转为json对象
//var u= JSON.parse(data);
var u=data;
for(var i=0;i<u.length;i++){
var tr= "<tr>";
tr+="<td>"+u[i].name+"</td>";
tr+="<td>"+u[i].sex+"</td>";
tr+="<td>"+u[i].age+"</td>";
tr+="</tr>";
$("table").append($(tr));
}
})
jquery.getJSON()
jQuery 第六章 jQuery在Ajax应用的更多相关文章
- jQuery系列 第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
- 第六章 jQuery选择器
jQuery选择器概述: 选择器jQuery基础,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器. 什么是jQuery选择器: jQuery选择器拥有良好的浏览器兼容性,不用使用 ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- jQuery系列 第二章 jQuery框架使用准备
第二章 jQuery框架使用准备 2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 <script> window.onload = function ...
- 第六章 jQuery和ajax应用
ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...
- 锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用
1.Ajax 的XMLHttpRequest 对象 XMLHttpRequest 是Ajax 的核心,它是Ajax 实现的关键---发送异步请求.接受响应及执行回调都是通过它来完成的.XMLHttpR ...
- jQuery第六章
jQuery与Ajax应用 一.Ajax的优势和不足 1.Ajax的优势: (1)不需要插件支持:不需要任何浏览器插件就可以被绝大多数浏览器支持 (2)优秀的用户体验:能在不刷新整个页面的前提下更新数 ...
- 第六章-jQuery
jQuery的理念是: 写更少的代码, 完成更多的工作 jQuery有两个版本1.x和2.x, 版本2.x不再支持IE678 jQuery最明显的标志就是$, jQuery把所有的功能都封装在了jQu ...
- 第六章 jQuery操作表单
1.单行文本框的应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
随机推荐
- jmeter学习记录--07--jmeter元件
通过jmeter元件可以模拟负载.参数化.设置关联.设置检查点.设置集合点.控制场景运行.监控测试结果等. 1.逻辑控制器:比如foreach控制器,查询到了订单并要对每个订单进行出库操作,以订单号作 ...
- 解决刷新页面vuex store中数据丢失的问题
**问题背景:**页面刷新后,vuex中的数据丢失.这是因为:js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的.进行刷新页面的操作,以前申请的内存被释放,重新加载脚本代码,变量 ...
- SharedPreferences类的使用
SharedPreferences,用xml文件保存用户的偏好设置,是一个轻量级的存储类. 效果图: 代码: activity_main <?xml version="1.0" ...
- Axis2创建WebService服务端接口+SoupUI以及Client端demo测试调用
第一步:引入axis2相关jar包,如果是pom项目,直接在pom文件中引入依赖就好 <dependency> <groupId>org.apache.axis2</gr ...
- ES-6常用语法和Vue初识
一.ES6常用语法 1.变量的定义 1. 介绍 ES6以前 var关键字用来声明变量,无论声明在何处都存在变量提升这个事情,会提前创建变量. 作用域也只有全局作用域以及函数作用域,所以变量会提升在函数 ...
- kubernetes 将pod运行在某些特定的节点上，给节点打标签
给节点打上标签: kubectl label node <node_name> GPU=true #打上标签 GPU=true 在创建pod的yaml文件时: 添加 nodeSel ...
- [LOJ2310][APIO2017]斑斓之地——可持久化线段树
题目链接: [APIO2017]斑斓之地 将不是河流的格子染成白色,是河流的格子染成黑色,那么连通块数就是白色格子数$-1*2$的联通白色格子数$-2*1$的联通白色格子数$+2*2$的联通白色格子数 ...
- Django_RBAC_demo2 升级版权限控制组件
RBAC 升级版 预期要求 前端在无权限时不在提供操作标签 更改部分硬编码 实现更加精准的权限控制 未改动前的版本 在这里 ⬇ Django_rbac_demo 权限控制组件框架模型 具体更改 数据库 ...
- Markdown初入门(使用Typora编辑)
标题 使用#来实现标题的大小控制 # h1 标题1 ## h2 标题2 ### h3 标题3 #### h4 标题4 ##### h5 标题5 ###### h6 标题6 标题一 标题二 标题三 标题 ...
- webpack学习记录-认识loader（二）
Loader 就像是一个翻译员,能把源文件经过转化后输出新的结果,并且一个文件还可以链式的经过多个翻译员翻译. loader参考文章:https://webpack.docschina.org/loa ...