关于js和jQuery的AJAX实现,直接进入主题
1、原生js的AJAX实现,这里的后台是test.php,点击id为inputBox的时候便触发AJAX请求:
- function getInfoByJs() {//原生js获取信息
- var request=new XMLHttpRequest();
- // request.open("GET","test.php?number="+document.getElementById("inputBox").value);//get方法向后台传值 通过url传输数据
- request.open("POST","test.php"); //POST方法传值
- var data="number="+document.getElementById("inputBox").value; //如果是get方式这里就不需要定义data
- request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gbk");//必须写的 千万注意!!!
- request.send(data); //如果是get方法就不需要send数据 用url的方式传输
- request.onreadystatechange=function () { //事件监听 readyState改变的时候便会触发
- if(request.readyState===4) { //当readyState变成4的时候说明响应内容解析完成,可以在客户端调用了
- if (request.status === 200) { //当请求的status是200的时候表示后台页面正常访问 可以在接下来执行相应的操作了
- // to do... //处理相应的业务逻辑
- }
- else {
- alert("发生错误:" + request.status); //如果发生了错误 输出请求的状态码
- }
- }
- }
- }
2、①jQuery的AJAX实现get请求,这里的后台是test.php,点击id为jqAjaxTestByGET的时候就会向AJAX触发AJAX请求:
- $(document).ready(function () { //当document加载完成 执行function这个匿名函数 GET测试
- $("#jqAjaxTestByGET").click(function () {
- $.ajax({//以json 的形式传入参数 //使用jQuery的方式异步加载数据 使用GET方法 这样相当于给id为jqAjaxTest的标签添加了一个匿名函数
- type:"GET", //get方法
- url:"test.php?number="+$("#inputBox").val(), //如果是get方法的话 数据需要在url里进行传输 用拼接url的方式传输id为inputBox的值
- //第一个参数以?符号传输 后面的以&符号继续拼接传输 比如 test.php?a=1&b=2&c=3
- dataType:"json", //数据以json的形式进行传输
- success:function () {
- alert("传输成功");
- }, //传输成功执行的匿名函数
- error:function (jqXHR) { //jqXHR是这个浏览器原生的XMLHttpRequest对象
- alert("传输失败,错误码"+jqXHR.status);
- } //传输失败执行的匿名函数
- })
- }); //click触发的匿名函数结束
- }); //ready触发的匿名函数结束
- $(document).ready(function () { //当document加载完成 执行function这个匿名函数 POST测试
- $("#jqAjaxTestByPOST").click(function () { //使用jQuery的方式异步加载数据 使用POST方法 这样相当于给d为jqAjaxTest的标签添加了一个匿名函数
- $.ajax({
- type:"POST", //POST方法
- url:"test.php", //如果是get方法的话 数据需要在url里进行传输 由于是POST 就不需要了
- dataType:"json", //数据以json的形式进行传输
- data:{
- number:$("#inputBox").val() //data这里要写成前面dataType所对应的形式
- },
- success:function () {
- alert("传输成功");
- }, //传输成功执行的匿名函数
- error:function (jqXHR) { //jqXHR表示这个jQuery的XMLHttpRequest
- alert("传输失败,错误码"+jqXHR.status);
- } //传输失败执行的匿名函数
- })
- }); //click触发的匿名函数结束
- });
原文:http://blog.csdn.net/qq_35580883/article/details/77926120