JQuery中$.post()和$.ajax()收到的数据不能用的问题

最近博主在开发一个猜谜游戏的时候遇到一些关于JQuery中使用这两个方法可能遇到的问题总结,我自己也是花了好多的心思 和事件才找到问题和解决问题。下面是我自己在开发过程中遇到的问题,希望可以帮助到你。

方法介绍

$.post()这方法一共有四个参数。

参数 描述
URL 必需。规定将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数:
data - 包含来自请求的结果数据
status - 包含请求的状态(“success”、“notmodified”、“error”、“timeout”、“parsererror”)
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。
默认地,jQuery 会智能判断。
可能的类型:
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“script” - 以 JavaScript 运行响应,并以纯文本返回
“json” - 以 JSON 运行响应,并以 JavaScript 对象返回
“jsonp” - 使用 JSONP 加载一个 JSON 块,将添加一个 “?callback=?” 到 URL 来规定回调

$,ajax()这个方法的参数比较多,下面我把我自己写的代码拿上来讲解。

 $.ajax({
            url:'setguessing.php',
            type:'post',
            data:{
                uid:23,
                order:num,
                type:1
            },
            dataType:'json',
            success:function (data) {
 });

这里用到的参数上面$,post()的参数说明都有解析,其实还有其他的参数,但是我开发的过程中并没有用到这些参数。所以这里不会说其他参数。

遇到问题

漏写错写的情况

像上面的两个方法都有好几个参数,像URL,data和type的两种提交方式一般都是不会写漏写错的,而且这三个基本都要用到的东西,就算是写错了也是很容易就可以找的到错误,下面我说说有些参数漏了会怎么样。比如 dataType这个参数,这个参数是告诉服务器,你要传回来给我什么类型的数据,一般来说,都是XML和JSON,大多数情况都是JSON,所以,这个dataType参数就要写明白是JSON,或者说你后端开发的PHP上的有如下的代码:

header('Content-type:application/json');

这样的话,你使用上面的两个代码的时候就可以不用写这个dataType参数,这段代码就是说传回去的数据类型就是JSON。还有就是要注意参数之间是用一个小逗号连接的,一般来说这种错误浏览器一般会给你报出来,当然最好就是按照正确的书写方式来说,就可以避免很多低级错误。

返回的数据出现错误

因为博主返回的数据类型全都是JSON格式,所以我这里举例子就用JSON,其他格式暂不考虑。

返回的数据格式不对

这种错误是很经常出现的,特别是像博主自己自学,基本是按照别人的写法去看的,所以有时候在书写的时候就会漏掉或者是写错,而导致返回的数据类型格式不对。举个列子:
PHP的代码:

<?php
header('Content-type:text/html;charset=utf-8');

echo $a = 1;

echo "</br>";

echo $arr = '{
       "uid":"YDW",
       "password":"123"
                                        
    }';
?>

返回前端的数据是这样的:

1
{ "uid":"YDW", "password":"123" }

这样的数据如果没有上面的1是标准的JSON的对象数据类型,是可以直接在前端直接调用的,问题就出现在前面的这个1,导致了这个类型的错误,然后在你调用uid以及password的时候都会出现不认识的情况,类似的情况还有,在文档里写了很多提醒自己的注释,然后在返回的数据类型上面就看到你在文档里写的注释,这种情况其实跟上面的情况是一模一样的,都会使数据无效化。

还有的情况也是数据格式不对导致的错误,比如下面的代码:

echo $arr = '{
       "uid":"YDW",
       "password":"123",
                                        
    }';

对比上面的代码,只是在password的最后加了一个小逗号,也会导致错误,因为JSON数据类型不是一个语句,而是一个数据格式,所以不能加结束分号或者是小逗号结束,小逗号只能在两个数据之间添加来分割数据。

异步获取数据导致错误

异步获取数据一开始我自己也觉得没有什么问题的,直到我发现我在function定义的一个变量出现了错误的时候,我才发现异步获取数据是有一定的不好之处的,下面举个例子:

     $.post('setguessing.php?3',{ uid:12,type:3 },
            function(data){
               var chance  = (data['uifo']['chance']);
        },“json”);
            $(

我通过JQuery的$.post()获取想要的数据,并且定义一个变量chance来获取返回的数据中的chance,结果在我使用的过程中出现了chance这个变量未定义的情况,当时我就好奇了,为什么会出现这种情况,后来才知道这是异步处理的一个不好的结果。下面根据我自己的理解解释一下。因为这个 $.post()方法默认的是异步提交,所以如果在你提交的时候,你的代码就会继续执行下去,结果执行到你定义这个变量chance的时候,你的服务器还是没有返回数据给你,这个时候你的chance就没有值,就是等于没有定义。就是说,你这个变量没有定义,其实就是你提交的时候,你的服务器数据没及时回来,导致你这个变量没有值。我自己的解决办法就是使用同步处理。下面展示处理:

   $.ajaxSettings.async = false;
            $.post('setguessing.php?',{ uid:23,type:4},function(data){
                console.log(data);
                erro  = data['error'];
            },"json");
            $.ajaxSettings.async = true;

通过$.ajaxSettings.async这个来关闭异步执行,在整个post结束的时候再开启异步执行。这样就会等到服务器返回来数据之后,再执行下面的代码,这样就不会出行未定义的情况。
好了,暂时只记得遇到这些问题,等博主再去找找的小本本看看还有什么问题遇到过的时候,我会再次补充到这个博文。

猜你喜欢

转载自blog.csdn.net/qq_41559229/article/details/82948109
今日推荐