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:// ...
随机推荐
- IdentityServer4【Topic】Consent
Conset这个概念在Identityserver4中是表示要当前用户对第三方应用对资源请求的一个确认,它会被做成一个页面. 术语映射: Consent page--确认页面,我喜欢叫做Consent ...
- Flutter之List
void listDemo() { // 1.list的创建 listCreate(); // 2.多种类型的输出 listPrint(); // 3.添加数据 listAddElement(); / ...
- Linux(Ubuntu 16) 下Java开发环境的配置(三)------Mysql配置
前言 吐槽一句,如果在Ubuntu在默认情况下是只有最新的MySQL源的,即如果使用"sudo apt-get install mysql-server mysql-client " ...
- ubuntu only enable left click
xmodmap -e "pointer = 1 0 0 0 0 0 0 0 0 0"
- Linux 版本svn安装
CentOS6.5离线安装subversion 下载 linux rpm安装包 (我只下载了subversion-1.6.12-1.rhel5.x86_64.rpm),直接安装时会提示缺少依赖,在 r ...
- BZOJ 2200 道路与航线 (算竞进阶习题)
dijkstra + 拓扑排序 这道题有负权边,但是卡了spfa,所以我们应该观察题目性质. 负权边一定是单向的,且不构成环,那么我们考虑先将正权边连上.然后dfs一次找到所有正权边构成的联通块,将他 ...
- Matlab中simulink的state space模块
%列写状态空间表达式矩阵 A=[- -;]; B=[ ; ]; C=[ ; ]; D=[ ; ]; %得到传递函数表达式 [num, den]=ss2tf(A, B, C, D, ); %在命令行打印 ...
- python xpath学习
一.选取节点: 二.谓词: 注意:在scrapy中用xpath进行搜索时,如果使用相对路径,要加上.,如,不然搜索的是整个文档.
- Python爬虫之一
1. 爬虫的选取:scrapy和requests+beautifuisoup scrapy是框架,而requests和beautifulsoup是库.scrapy框架是可以加如requests和bea ...
- IDEA 破解
推荐三篇文章 : 1: https://blog.csdn.net/nishiwodebocai21/article/details/71359619?fps=1&locationNu ...