web项目中使用ajax遇到过的坑

准备记录一下学习到的东西，与诸君分享

先来看一下今天准备的前端代码，方便大家看，至于后端代码就不贴了
已知后端返回来的是一个json格式的字符串 {“name”:“不洇”,“password”:“123456”}

<form method="post">
          <table>
              <tr>
                <td>账号：</td>
                <td><input type="text" name="username" id="username" placeholder="用户名"></td>
                <td><span id="NError"></span></td>
              </tr>
              <tr>
                <td>密码：</td>
                <td><input type="password" name="password" id="password" placeholder="大于六位数哦"></td>
                <td><span id="PError"></span></td>
              </tr>
              <tr>
                <td><input type="submit" id="login" value="登录"></td>
                <td><input type="reset" value="重置"></td>
              </tr>
          </table>
      </form>

再看看写的ajax

     <script language="JavaScript">
          var rst = 2;
          $("#login").click(function () {
              var name = $("#username").val();
              var password=$("#password").val();
              var data={
                  "username":name,
                  "password":password
              }
              alert(data.username);
              $.ajax({
                  type:"post",
                  url:"/login",
                  data:data,
                  async:false,
                  datatype:"json",
                  success:function (result) {
                        alert(result.name);                  //undefined
                        alert(result.password);				 //undefined
                        alert(result.name+result.password);  //NaN
                        rst=result.name+result.password;	 //NaN
                  },
                  error:function (XMLHttpRequest, textStatus, errorThrown) {
                      alert("服务器链接失败");
                      alert(XMLHttpRequest.status);//状态码
                      alert(XMLHttpRequest.readyState);//状态
                      alert(textStatus);//错误信息
                  }
              });
              alert(rst);              //这个先执行还是success先执行  看 属性值async，async默认值为true
          })
      </script>

ajax发送数据成功了，但回来却不执行success或者error

这个错误属实坑了我半天，我找了好久才知道原来是因为表单中input标签的type属性的原因，因为如果type是submit，那我们在提交数据之后，整个表单的数据都被清空了，而整个页面也都会刷新。所以返回来的数据当然不是给到了刷新之后的页面。所以看起来就像success和error都没执行一样。
将表单中改成下面这样即可

因为我们的ajax是异步刷新的，不必等待后端返回数据。等到返回后再进行局部刷新即可。

看上面的代码，我们的async设置成true之后，你会发现，执行后，页面最先alert的是最下面的那个，即弹出 2，如果设置成false，则先执行完ajax再往下走。

success：function（data）中这个data老报NaN或者undefined

这个问题应该考虑的就是和返回来的result的类型有关了

 success:function (result) 

我所知道的能影响这个地方的有三个。
分别是后端的response.setContentType()，ajax当中的dataType，
分情况给你们看看吧

1. 第一种，我们response.setContentType(“text/html;charset=utf-8”)，dataType设置为"text"，或者不设置，看一下1的结果

 alert(result.name);                     //undefined
 alert(result.password);				 //undefined
 alert(result.name+result.password);     //NaN
 rst=result.name+result.password;	     //NaN

2. 第二种，我们response.setContentType(“text/html;charset=utf-8”)，dataType设置为"json"
3. 第三种，我们response.setContentType(“application/json;charset=utf-8”)，dataType设置为"text"，或者不设置
   看一下2和3的结果

 alert(result.name);                     //不洇
 alert(result.password);				 //123456
 alert(result.name+result.password);     //不洇123456
 rst=result.name+result.password;	     //不洇123456

好，接下来讲一下为啥出现undefined和NaN

• undefined
  这个是因为我们得到的result不是一个json数据，而是一个文本数据(即使你的文本数据是json格式的)。这个时候我们就需要手动使用 eval() 或 $.parseJSON() 等方法将返回的字符串转换为json对象使用。注意eval()使用时要这样子用，eval("("+result+")")，避免你的{}被当成js的代码块
• NaN
  即 not a number ，在js中，它不是一个数字，你却想要把它转成数字，或者当数字去用，就会报NaN。上面的代码出现这个原因，主要就是两个非数字相加。这里js会把加号理解为“不改变正负号”的一元运算符，而不是你想要的“字符串连接”的二元运算符。所以这里js会隐式的帮你把前面的字符串转成数字类型,也就是NaN

差不多就是上述了，就是遇到了解决后觉得该记录一下，一定要提醒自己注意细节

新手上路，多多谅解，如有帮助到各位，异常欢喜！