AJAX请求----javaweb

最新推荐文章于 2024-06-13 11:04:47 发布

qq_38727977

最新推荐文章于 2024-06-13 11:04:47 发布

阅读量76

点赞数

分类专栏： SpringMVC 文章标签： ajax

本文链接：https://blog.csdn.net/qq_38727977/article/details/116127380

版权

SpringMVC 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、什么是 AJAX 请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发
技术。

ajax 是一种浏览器通过 js 异步发起请求， 局部更新页面的技术。
Ajax 请求的局部更新， 浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

2、原生 AJAX 请求的示例

总的原生实例

<!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 here</title>
<script type="text/javascript">
// 在这里使用 javaScript 语言发起 Ajax 请求， 访问服务器 AjaxServlet 中 javaScriptAjax
function ajaxRequest() {
// 1、 我们首先要创建 XMLHttpRequest
var xmlhttprequest = new XMLHttpRequest();
// 2、 调用 open 方法设置请求参数（true表示异步）
xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAj
ax",true)
// 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 request</button>
<div id="div01">
</div>
</body>
</html>

在这里插入图片描述

3、jQuery 中的 AJAX 请求

$.ajax 方法

url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据

格式有两种：

一： name=value&name=value
二： {key:value}

success 请求成功，响应的回调函数
dataType 响应的数据类型
常用的数据类型有：

text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象

data：

类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData
选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如
{foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。

dataType

类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME
类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script
则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了
“cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的
script标签来加载）
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?
callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 “text”: 返回纯文本字符串

success

类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
// data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
// alert("服务器返回的数据是： " + data);
// var jsonObj = JSON.parse(data);
$("#msg").html("编号： " + data.id + " , 姓名： " + data.name);
},
dataType : "json"
});
});

$. g e t 方法和$ .post 方法

url 请求的 url 地址
data 发送的数据
callback 成功的回调函数
type 返回的数据类型

// ajax--get 请求
$("#getBtn").click(function(){
$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" get 编号： " + data.id + " , 姓名： " + data.name);
},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data)
{
$("#msg").html(" post 编号： " + data.id + " , 姓名： " + data.name);
},"json");
});

$.getJSON 方法

url 请求的 url 地址
data 发送给服务器的数据
callback 成功的回调函数

// ajax--getJson 请求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
(data) {
$("#msg").html(" getJSON 编号： " + data.id + " , 姓名： " + data.name);
});
});

表单序列化 serialize()
serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接

// ajax 请求
$("#submit").click(function(){
// 把参数序列化
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {
$("#msg").html(" Serialize 编号： " + data.id + " , 姓名： " + data.name);
});
});

qq_38727977

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX请求----javaweb

1、什么是 AJAX 请求AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。Ajax 请求的局部更新，浏览器地址栏不会发生变化局部更新不会舍弃原来页面的内容2、原生 AJAX 请求的示例总的原生实例<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Tran
复制链接

扫一扫