在 jQuery 的 $.ajax() 方法中，dataType 是一个可选参数，用于指定服务器返回数据的类型，jQuery 会根据这个参数对服务器返回的数据进行相应的处理。以下是对 dataType 常见取值的详细介绍：
1. xml
-
描述：期望服务器返回 XML 格式的数据。jQuery 会将服务器返回的数据解析为 XML 文档对象，方便使用 XML DOM 方法进行操作。
-
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XML dataType 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchXml">获取 XML 数据</button>
<div id="result"></div>
<script>
$(document).ready(function () {
$('#fetchXml').click(function () {
$.ajax({
url: 'example.xml',
dataType: 'xml',
success: function (xml) {
$(xml).find('item').each(function () {
var title = $(this).find('title').text();
$('#result').append('<p>' + title + '</p>');
});
},
error: function () {
$('#result').text('请求失败');
}
});
});
});
</script>
</body>
</html>
假设 example.xml 文件内容如下：
<items>
<item>
<title>项目 1</title>
</item>
<item>
<title>项目 2</title>
</item>
</items>
2. html
-
描述：期望服务器返回 HTML 格式的数据。jQuery 会将返回的 HTML 字符串直接插入到 DOM 中，或者可以将其作为普通字符串进行处理。
-
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML dataType 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchHtml">获取 HTML 数据</button>
<div id="result"></div>
<script>
$(document).ready(function () {
$('#fetchHtml').click(function () {
$.ajax({
url: 'example.html',
dataType: 'html',
success: function (html) {
$('#result').html(html);
},
error: function () {
$('#result').text('请求失败');
}
});
});
});
</script>
</body>
</html>
假设 example.html 文件内容如下：
<h2>这是一个 HTML 片段</h2>
<p>这是一段 HTML 文本。</p>
3. script
-
描述：期望服务器返回 JavaScript 代码。jQuery 会自动执行返回的 JavaScript 代码。
-
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script dataType 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchScript">获取 JavaScript 代码</button>
<div id="result"></div>
<script>
$(document).ready(function () {
$('#fetchScript').click(function () {
$.ajax({
url: 'example.js',
dataType: 'script',
success: function () {
$('#result').text('脚本执行成功');
},
error: function () {
$('#result').text('请求失败');
}
});
});
});
</script>
</body>
</html>
假设 example.js 文件内容如下：
alert('这是从服务器获取的 JavaScript 代码');
4. json
-
描述：期望服务器返回 JSON 格式的数据。jQuery 会将返回的 JSON 字符串解析为 JavaScript 对象，方便直接访问其中的属性和值。
-
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON dataType 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchJson">获取 JSON 数据</button>
<div id="result"></div>
<script>
$(document).ready(function () {
$('#fetchJson').click(function () {
$.ajax({
url: 'example.json',
dataType: 'json',
success: function (data) {
$('#result').text('姓名: ' + data.name + ', 年龄: ' + data.age);
},
error: function () {
$('#result').text('请求失败');
}
});
});
});
</script>
</body>
</html>
假设 example.json 文件内容如下：
{
"name": "张三",
"age": 25
}
5. jsonp
-
描述：用于跨域请求 JSON 数据。JSONP（JSON with Padding）是一种跨域数据交互的技术，它通过动态创建
<script>标签来实现跨域请求。服务器返回的数据会被包裹在一个回调函数中。 -
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP dataType 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchJsonp">获取跨域 JSON 数据</button>
<div id="result"></div>
<script>
$(document).ready(function () {
$('#fetchJsonp').click(function () {
$.ajax({
url: 'https://example.com/api/data',
dataType: 'jsonp',
success: function (data) {
$('#result').text('数据: ' + JSON.stringify(data));
},
error: function () {
$('#result').text('请求失败');
}
});
});
});
</script>
</body>
</html>
6. text
-
描述：期望服务器返回纯文本数据。jQuery 会将返回的数据作为普通字符串处理。
-
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text dataType 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchText">获取文本数据</button>
<div id="result"></div>
<script>
$(document).ready(function () {
$('#fetchText').click(function () {
$.ajax({
url: 'example.txt',
dataType: 'text',
success: function (text) {
$('#result').text(text);
},
error: function () {
$('#result').text('请求失败');
}
});
});
});
</script>
</body>
</html>
假设 example.txt 文件内容如下：
这是一段纯文本数据。
如果不指定 dataType，jQuery 会根据服务器返回的 Content-Type 头信息来自动判断数据类型。但为了确保数据能被正确处理，建议明确指定 dataType。
