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:// ...
随机推荐
- SpringCloud-Eureka服务注册与发现(二)
SpringCloud-Eureka服务注册与发现(二) https://www.cnblogs.com/qdhxhz/p/9357502.html https://blog.csdn.net/wei ...
- golang运算与循环等
一.golang运算符 1.算术运算符 + 相加- 相减* 相乘/ 相除% 求余++ 自增-- 自减 2.关系运算符 == 等于!= 不等于> 大于< 小于>= 大于等于<= ...
- monkey日志管理
日志管理作用 Monkey日志管理是Monkey测试中非常重要的一个环节,通过日志管理分析,可以获取当前测试对象在测试过程中是否会发生异常,以及发生的概率,同时还可以获取对应的错误信息,帮助开发定位和 ...
- sql 找出不包含字母、不包含汉字的数据
--1.不包含字母 SELECT * FROM t WHERE str NOT LIKE '%[a-zA-Z]%' SELECT * FROM t --2.不包含汉字 SELECT * FROM t ...
- MYSQL IN 出现的慢查询问题
IN = https://blog.csdn.net/solmyr_biti/article/details/54293492 https://www.cnblogs.com/wxw16/p/6105 ...
- Python3 与 C# 并发编程之～ 协程篇
3.协程篇¶ 去年微信公众号就陆陆续续发布了,我一直以为博客也汇总同步了,这几天有朋友说一直没找到,遂发现,的确是漏了,所以补上一篇 在线预览:https://github.lesschina.c ...
- 为 Java 程序员准备的 Go 入门 PPT
为 Java 程序员准备的 Go 入门 PPT 这是 Google 的 Go 团队技术主管经理 Sameer Ajmani 分享的 PPT,为 Java 程序员快速入门 Go 而准备的. 视频 这个 ...
- c#操作IIS之IISHelper
//----------------------------------------------------------------------- // <copyright file=&quo ...
- vue常用手册
1.搭建vue的开发环境: 1.必须要安装node.js 2.安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli 3.新建项目 vue init webp ...
- svn客户端更改用户名
你是用的小乌龟做客户端吗?在文件夹里点右键,选择TortoiseSVN->Setings->SavedData里面有个authentication data,点击后面的Clear就好了下次 ...