Web编程入门 1.3 前端与后台的交互--ajax方法 以及ajax方法下get与post 的区别

在仓库系统的开发中，开始我遇到了一个很神奇的问题，那就是函数居然不按照我定义的顺序来执行，定义js连接数据库的操作每次都不按照我预定的时间来执行，因为基本没看什么入门资料因此当时完全不知道什么同步异步的问题，因此，就只有找连结数据库的替代方法，就是用PHP，JQuery自带的ajax方法可以关闭异步，然后与PHP进行数据交互，需要进行的查找和写入等操作放到PHP中来处理，就避免了js中会出现的异步处理的问题。当然好孩子还是应该好好搞懂异步同步操作的。

这里介绍一下如何通过ajax传递数据，然后下一章介绍通过PHP连接数据库进行查询等操作。

(1)ajax方法：

准确来说应该是ajax请求下的ajax方法，也是看了一些文章才了解到原来ajax请求还有多种形式诸如$.post()，$.get()，$.load()等等。这里就介绍一下最常用的，也是作用范围最广的ajax方法。先介绍一个样例：

$.ajax({
        url:"/WMS/pages/examples/login.php",
        data: {
          'email': name,
          'password': password
        },
        type: "GET",
        dataType: "json",
        async:false,
        success:function(result){
           //do something
        },
        error:function(){
          //do something
        }
      });

可选字段：
1）url：链接地址，字符串表示，这里我设定的就是本地的PHP文件地址
2）data：需发送到服务器的数据，GET与POST都可以
3）type："POST" 或 "GET"，请求类型，但是两者有一定的区别
4）timeout：请求超时时间，单位为毫秒，数值表示
5）cache：是否缓存请求结果，bool表示
6）contentType：内容类型，默认为"application/x-www-form-urlencoded"
7）dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
8）success：请求成功后，服务器回调的函数
9）error：请求失败后，服务器回调的函数
10）complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
11）async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
12) traditional: 默认值为false，默认会使得jquery深度序列化参数对象，不然可能会出现后台拿不到数据的情况，这里我暂时没有遇到过，但是我看博客上很多人都在讨论这个情况，因此还是需要留意，当后台拿到数据有问题的时候就有可能是traditional参数值的问题

 

(2)GET与POST的区别

GET和POST都是向服务器发送一种请求，只是发送机制不同
①GET请求会将参数跟在URL后进行传递，因此，使用GET在URL中可以看到详细的参数，这对于密码等需要传输的数据并不安全，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。
②GET方式提交的数据最多只能是1024字节，POST传输的数据量大，可以达到2M。
③GET方式请求数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。
④POST请求必须设置Content-Type值为application/x-form-www-urlencoded；
⑤发送请求时,因为GET请求的参数都在URL里,所以send函数发送的参数为null,而POST请求在使用send方法时,却需赋予其参数；