-
Ajax的简单使用
1、什么是 Ajax？
AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的
网页开发技术。
ajax 是一种浏览器异步发起请求。局部更新页面的技术。 2.2、javaScript 原生 Ajax 请求
原生的 Ajax 请求，
1、我们首先要创建 XMLHttpRequest 对象
2、调用 open 方法设置请求参数
3、调用 send 方法发送请求
4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
1）创建一个 html 页面，发起请求。代码如下：2、代码演示
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title heretitle> <script type="text/javascript"> function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlhttprequest=new XMLHttpRequest(); // 2、调用open方法设置请求参数 xmlhttprequest.open("GET","http://localhost:8080/pro19/ajaxServlet?action=javaScriptAjax") // 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。 xmlhttprequest.onreadystatechange=function(){ if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){ var jsonObj=JSON.parse(xmlhttprequest.responseText); //把响应的数据显示在页面上 document.getElementById("div01").innerHTML= "编号："+jsonObj.id+"姓名："+jsonObj.name; } }; // 3、调用send方法发送请求 xmlhttprequest.send(); } script> head> <body> <button onclick="ajaxRequest()">ajax requestbutton> <div id="div01"> div> <table border="1"> <tr> <td>1.1td> <td>1.1td> <td>1.1td> <td>1.1td> tr> <tr> <td>1.1td> <td>1.1td> <td>1.1td> <td>1.1td> tr> <tr> <td>1.1td> <td>1.1td> <td>1.1td> <td>1.1td> tr> <tr> <td>1.1td> <td>1.1td> <td>1.1td> <td>1.1td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
在xml中的配置
<servlet> <servlet-name>AjaxServletservlet-name> <servlet-class>com.atguigu.servlet.AjaxServletservlet-class> servlet> <servlet-mapping> <servlet-name>AjaxServletservlet-name> <url-pattern>/ajaxServleturl-pattern> servlet-mapping>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
创建Servlet接收请求
package com.atguigu.servlet; import com.atguigu.pojo.Person; import com.google.gson.Gson; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class AjaxServlet extends BaseServlet{ protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("Ajax请求过来了"); Person person=new Person(1,"开学延迟"); //json格式化的字符串 Gson gson=new Gson(); String s = gson.toJson(person); resp.getWriter().write(s); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
结果演示：
3、JQuery 的 Ajax 请求(重点)
3.1、四个 Ajax 请求方法
$.ajax 方法
$.get 方法
$.post 方法
$.getJSON 方法 一个表单序列化方法：
serialize()表单序列化方法3.2/如何使用上面的五个方法：
在 JQuery 中和 Ajax 请求有关的方法有四个
3.2.1、
$.ajax 请求参数url： 请求的地址
type : 请求的方式 get 或 post
data : 请求的参数 string 或 json
success: 成功的回调函数
dataType: 返回的数据类型 常用 json 或 text
下面的方法必须遵守参数的顺序3.21、
$.get 请求和$.post 请求url:请求的 URL 地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text。
Jquery 的$.getJSON
url:待载入页面的 URL 地址
“玩转”Java 系列
data:待发送 Key/value 参数。
callback:载入成功时回调函数。 表单的序列化
serialize() 方法可以把一个 form 表单中所有的表单项。都以字符串 name=value&name=value 的形式进行拼接，省去
我们很多不必要的工作。
由于$.get、$.post和 getJSON 这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所以我们以$.ajax()方法的使用为示例进行展示：3.3、代码演示
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title heretitle> <script type="text/javascript" src="script/jquery-1.7.2.js">script> <script type="text/javascript"> $(function(){ // ajax请求 $("#ajaxBtn").click(function(){ $.ajax({ url:"http://localhost:8080/pro19/ajaxServlet", // data:"action=jQueryAjax", data:{action:"jQueryAjax"}, type:"GET", success:function(data){ // alert("服务器返回的数据是："+data); // var json=JSON.parse(data) $("#msg").html("ajax编号："+data.id+"姓名："+data.name); }, dataType:"JSON" }); // alert("ajax btn"); }); // ajax--get请求 $("#getBtn").click(function(){ $.get("http://localhost:8080/pro19/ajaxServlet","action=jQueryGet",function(data){ $("#msg").html("get 编号："+data.id+"姓名："+data.name); },"json"); }); // ajax--post请求 $("#postBtn").click(function(){ // post请求 $.post("http://localhost:8080/pro19/ajaxServlet","action=jQueryPost",function(data){ $("#msg").html("post 编号："+data.id+"姓名："+data.name); },"json"); }); // ajax--getJson请求 $("#getJSONBtn").click(function(){ // 调用 $.getJSON("http://localhost:8080/pro19/ajaxServlet","action=jQueryGetJSON",function(data){ $("#msg").html("getJSON 编号："+data.id+"姓名："+data.name); }); }); // ajax请求 $("#submit").click(function(){ // 把参数序列化 $.getJSON("http://localhost:8080/pro19/ajaxServlet","action=jQuerySerialize&"+$("#form01").serialize(),function(data){ $("#msg").html("Serialize 编号："+data.id+"姓名："+data.name); }) }); }); script> head> <body> <div> <button id="ajaxBtn">$.ajax请求button> <button id="getBtn">$.get请求button> <button id="postBtn">$.post请求button> <button id="getJSONBtn">$.getJSON请求button> div> <div id="msg"> div> <br/><br/> <form id="form01" > 用户名：<input name="username" type="text" /><br/> 密码：<input name="password" type="password" /><br/> 下拉单选：<select name="single"> <option value="Single">Singleoption> <option value="Single2">Single2option> select><br/> 下拉多选： <select name="multiple" multiple="multiple"> <option selected="selected" value="Multiple">Multipleoption> <option value="Multiple2">Multiple2option> <option selected="selected" value="Multiple3">Multiple3option> select><br/> 复选： <input type="checkbox" name="check" value="check1"/> check1 <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/> 单选： <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="radio2"/> radio2<br/> form> <button id="submit">提交--serialize()button> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
Ajax的代码如下：
package com.atguigu.servlet; import com.atguigu.pojo.Person; import com.google.gson.Gson; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class AjaxServlet extends BaseServlet{ protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("Ajax请求过来了"); Person person=new Person(1,"开学延迟"); //json格式化的字符串 Gson gson=new Gson(); String s = gson.toJson(person); resp.getWriter().write(s); } protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("jQueryAjax ==方法调用了"); Person person=new Person(1,"开学延迟"); //json格式化的字符串 Gson gson=new Gson(); String s = gson.toJson(person); resp.getWriter().write(s); } protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("jQueryGet ==方法调用了"); Person person=new Person(1,"开学延迟"); //json格式化的字符串 Gson gson=new Gson(); String s = gson.toJson(person); resp.getWriter().write(s); } protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("jQueryPost ==方法调用了"); Person person=new Person(1,"开学延迟"); //json格式化的字符串 Gson gson=new Gson(); String s = gson.toJson(person); resp.getWriter().write(s); } protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("jQueryGetJSON ==方法调用了"); Person person=new Person(1,"开学延迟"); //json格式化的字符串 Gson gson=new Gson(); String s = gson.toJson(person); resp.getWriter().write(s); } protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("jQuerySerialize ==方法调用了"); System.out.println("用户名称："+req.getParameter("username")); System.out.println("用户密码："+req.getParameter("password")); Person person=new Person(1,"开学延迟"); //json格式化的字符串 Gson gson=new Gson(); String s = gson.toJson(person); resp.getWriter().write(s); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
-
相关阅读:
【lvgl】linux开发板搭建环境
Linux 环境变量
MFC Windows 程序设计[261]之选项文档例程(附源码)
九、Echart图表 之 grid组件用法 直角坐标系内绘图网格
Python150题day14
I O 流
附录3-jQuery插件
前端700行代码项目练习--小米官网（仅html、css实现）
设计循环队列---力扣622
JVM参数调优——G1收集器
- 原文地址：https://blog.csdn.net/hzsd_ygdcs/article/details/126561898
