jQuery 发送ajax请求

写在前面的话:php

  利用jQuery 的 ajax() 方法经过 HTTP 请求加载远程数据 是很是简便的,也是经常使用的功能。W3school网上的资料(里边有各个参数的介绍)前端


 1.经常使用写法:jquery

$.ajax({ url:'test.php', type:'POST',  // 默认为GET
 data:{ name:'xy',
    age:22 }, timeout:5000, // 超时时间 beforeSend:function(xhr){   console.log(xhr)   console.log('发送前') }, success:function(result){   console.log(result) }, error:function(xhr,textStatus){   console.log('错误')   console.log(xhr)   console.log(textStatus) } })

2.若是资源是跨域的,那么请求数据使用jsonp格式的:ajax

$.ajax({ url:"test2.php", type:"post", dataType:"jsonp", jsonp:"callback", data:{ page: 2 }, success:function (result) { console.log(result) }, error:function (error) { console.log(error) } });

 3.关于向服务器传递数据的一些补充:json

  json字符串与json对象之间的转换:后端

JSON.parse()        // json字符串转化为json对象
JSON.stringify()    // json对象转化为json字符串 // 例子1:
var s = {}; s.a = 'aaaa'; s.b = 'asdasd'; console.log(JSON.stringify(s)) // 字符串 {"a":"aaaa","b":"asdasd"}
console.log(JSON.parse(JSON.stringify(s)))    // 对象 Object {a: "aaaa", b: "asdasd"}

通常作法是:把页面的数据存在一个对象里面,而后将这个对象转换成json字符串,传给服务器跨域

//例子2:前端向后端发送数据 在通常场景来讲,get方法无需JSON.stringify,post方法须要。??
  function testFun(data) {   $.ajax({
     url: "",     type:
"POST",     dataType: "json",     data: {data:JSON.stringify(data)},     success: function (data) {       console.log(data);     }   }); } 在点击提交或者保存时候,运行 testFun 函数;

 4.有些是须要在发送时设置请求头的,设置方法:在ajax方法里面加一个参数 headers: {你要设置的内容}服务器

例:app

headers:{
Accept:"application/json;"
}异步

以上。

附:

网上找来的原生写法(截的哪位大神的我不知道了),我本人目前还没使用过原生来写 ……

//原生写法
$('#send').click(function(){ //请求的5个阶段,对应readyState的值
  //0: 未初始化,send方法未调用;
  //1: 正在发送请求,send方法已调用;
  //2: 请求发送完毕,send方法执行完毕;
  //3: 正在解析响应内容;
  //4: 响应内容解析完毕;

  var data = 'name=yang'; var xhr = new XMLHttpRequest(); //建立一个ajax对象
  xhr.onreadystatechange = function(event){ //对ajax对象进行监听
    if(xhr.readyState == 4){ //4表示解析完毕
      if(xhr.status == 200){ //200为正常返回
       console.log(xhr)     }   } }; xhr.open('POST','url',true); //创建链接,参数一:发送方式,二:请求地址,三:是否异步,true为异步
  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //无关紧要
  xhr.send(data); //发送
});
相关文章
相关标签/搜索