在前端开发中，我们经常需要通过HTTP请求与后端服务器进行数据交互。GET请求是其中最常用的请求方法之一，它通常用于请求数据而不需要发送大量数据。然而，GET请求本身并不支持直接发送JSON数据。为了解决这个问题，我们可以采用以下五种技巧来实现前端GET请求发送JSON数据。

技巧一：使用Query String

最简单的方法是将JSON数据转换为字符串，并将其作为查询字符串附加到URL的末尾。以下是一个示例：

var jsonData = {name: "John", age: 30}; var queryString = "name=John&age=30"; var url = "https://example.com/data?" + queryString; fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); 

这种方法简单易行，但缺点是URL长度有限制，不适合发送大量数据。

技巧二：使用URLSearchParams

URLSearchParams对象允许我们将JSON数据转换为查询字符串，并可以轻松地添加、删除和修改查询参数。以下是一个示例：

var jsonData = {name: "John", age: 30}; var params = new URLSearchParams(); params.append("name", jsonData.name); params.append("age", jsonData.age); var url = "https://example.com/data?" + params.toString(); fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); 

这种方法比直接拼接字符串更灵活，可以方便地处理多个查询参数。

技巧三：使用FormData

FormData对象允许我们将JSON数据转换为表单数据，并可以发送到服务器。以下是一个示例：

var jsonData = {name: "John", age: 30}; var formData = new FormData(); formData.append("data", JSON.stringify(jsonData)); fetch("https://example.com/data", { method: "POST", body: formData }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); 

这种方法适用于需要发送大量数据的情况，但需要注意，GET请求不支持发送FormData。

技巧四：使用JSONP

JSONP（JSON with Padding）是一种通过<script>标签发送JSON数据的技术。以下是一个示例：

var jsonData = {name: "John", age: 30}; var callback = "handleResponse"; var url = "https://example.com/data?callback=" + callback; fetch(url) .then(response => response.text()) .then(data => { window[callback](JSON.parse(data)); }) .catch(error => console.error('Error:', error)); function handleResponse(data) { console.log(data); } 

这种方法可以绕过同源策略的限制，但缺点是安全性较低，且只支持GET请求。

技巧五：使用CORS

CORS（Cross-Origin Resource Sharing）是一种允许跨源请求的技术。通过在服务器端设置相应的CORS头部，可以允许前端GET请求发送JSON数据。以下是一个示例：

var jsonData = {name: "John", age: 30}; var url = "https://example.com/data"; fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); 

这种方法需要服务器端的支持，但可以实现安全、高效的跨源请求。

通过以上五种技巧，我们可以轻松地在前端GET请求中发送JSON数据。在实际开发中，可以根据具体需求和场景选择合适的方法。