jQuery提示parsererror错误解决办法

parsererror是指在使用jQuery进行ajax请求时，响应的数据无法被正确解析，出现的错误。这个错误一般有以下几种原因：

1. 响应头的Content-Type字段与响应实体的格式不一致。

解决办法：确保响应头和实体的格式一致，例如Content-Type为application/json，则响应实体必须是json格式的数据。

2. 响应实体的格式不正确。

解决办法：确保响应实体的格式正确，例如json格式的数据必须符合json的语法规则。

3. 响应实体的编码不正确。

解决办法：确保响应实体的编码和Content-Type一致，如果是UTF-8编码，那么Content-Type应该是text/html;charset=UTF-8。

4. 请求跨域时没有设置正确的跨域请求头。

解决办法：跨域请求时需要设置正确的跨域请求头，例如Access-Control-Allow-Origin。

下面我们来看几个例子：

1. 响应头的Content-Type字段与响应实体的格式不一致

请求代码：

```javascript

$.ajax({

url: 'https://jsonplaceholder.typicode.com/todos/1',

success: function(response) {

console.log(response);

},

error: function(xhr, status, error) {

console.log('error', error);

}

});

```

响应实体：

```

{"id":1,"title":"delectus aut autem","completed":false}

```

由于响应头没有设置Content-Type字段，jQuery默认将其识别为text/plain格式，而响应实体是json格式的数据，所以出现了parsererror错误。

我们需要在响应头中设置Content-Type字段为application/json，才能正确解析json格式的数据：

响应头：

```

Content-Type: application/json; charset=utf-8

```

响应实体：

```

{"id":1,"title":"delectus aut autem","completed":false}

```

这样就可以正确解析响应数据了。

2. 响应实体的格式不正确

请求代码：

```javascript

$.ajax({

url: 'https://jsonplaceholder.typicode.com/todos/1',

success: function(response) {

console.log(response);

},

error: function(xhr, status, error) {

console.log('error', error);

}

});

```

响应实体：

```

{id:1,title:"delectus aut autem",completed:false}

```

由于响应实体的格式不符合json的语法规则，所以出现了parsererror错误。

我们需要将响应实体改为正确的json格式：

响应实体：

```

{"id":1,"title":"delectus aut autem","completed":false}

```

这样就可以正确解析响应数据了。

3. 响应实体的编码不正确

请求代码：

```javascript

$.ajax({

url: 'https://jsonplaceholder.typicode.com/todos/1',

success: function(response) {

console.log(response);

},

error: function(xhr, status, error) {

console.log('error', error);

}

});

```

响应实体：

```

{"id":1,"title":"delectus aut autem","completed":false}

```

由于服务器默认使用ISO-8859-1编码(即Latin-1)，而jQuery默认使用UTF-8编码，所以出现了parsererror错误。

我们需要在响应头中设置正确的编码和Content-Type字段：

响应头：

```

Content-Type: application/json; charset=ISO-8859-1

```

响应实体：

```

{"id":1,"title":"delectus aut autem","completed":false}

```

这样就可以正确解析响应数据了。

4. 请求跨域时没有设置正确的跨域请求头

请求代码：

```javascript

$.ajax({

url: 'https://api.github.com/users/octocat',

success: function(response) {

console.log(response);

},

error: function(xhr, status, error) {

console.log('error', error);

}

});

```

响应实体：

```

{"login":"octocat","id":583231,"node_id":"MDQ6VXNlcjU4MzIzMQ==","avatar_url":"https://avatars.githubusercontent.com/u/583231?v=4","gravatar_id":"","url":"https://api.github.com/users/octocat","html_url":"https://github.com/octocat","followers_url":"https://api.github.com/users/octocat/followers","following_url":"https://api.github.com/users/octocat/following{/other_user}","gists_url":"https://api.github.com/users/octocat/gists{/gist_id}","starred_url":"https://api.github.com/users/octocat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/octocat/subscriptions","organizations_url":"https://api.github.com/users/octocat/orgs","repos_url":"https://api.github.com/users/octocat/repos","events_url":"https://api.github.com/users/octocat/events{/privacy}","received_events_url":"https://api.github.com/users/octocat/received_events","type":"User","site_admin":false,"name":"The Octocat","company":"GitHub","blog":"https://github.com/blog","location":"San Francisco","email":"","hireable":null,"bio":null,"twitter_username":null,"public_repos":8,"public_gists":8,"followers":2984,"following":9,"created_at":"2011-01-25T18:44:36Z","updated_at":"2021-07-08T14:15:47Z"}

```

由于这个请求是跨域请求，而没有设置正确的跨域请求头，所以出现了parsererror错误。

我们需要在服务器端设置正确的跨域请求头：

```

Access-Control-Allow-Origin: *

```

这样就可以正确解析响应数据了。

综上所述，当parsererror错误出现时，我们需要根据错误原因来进行逐一排查和解决。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/