博主信息
陈文鹏的博客
博文
20
粉丝
0
评论
0
访问量
19103
积分:0
P豆:126

JQ中的ajax

2017年09月08日 15:27:34阅读数:727博客 / 陈文鹏的博客/ ajax文章

基本语法:

$.ajax(obj)

对象的参数设置及含义:

async: 布尔类型,代表是否异步,true代表异步,false同步,默认为true

cache: 是否缓存,布尔类型,true代表缓存,false代表不缓存,默认为true

complete: 当Ajax状态码(readyState)为4的时候所触发的回调函数

contentType: 发送信息至服务器时内容编码类型;(默认: "application/x-www-form-urlencoded")

data: 要求是一个字符串格式,Ajax发送时所传递的数据

dataType: 期待的返回值类型,可以是text,xml,json,默认为text类型

success: 当Ajax状态码为4且响应状态码为200时所触发的回调函数

type: Ajax发送网络请求的方式,(默认: "GET");

url: 请求的url地址

案例代码:

GET 请求 请求

<body>

    <input type="button" value="点击" id="btu">

</body>

<script>

    $('#btu').click(function(){

        //get请求

        $.ajax({

            url:'9-2.php?id=11',

            success:function(data){

                alert(data);

            }

        });

    });

</script>

POST 请求 请求

//POST请求及同步异步

$.ajax({

    url:'9-2.php',

    type:'post',

    data:'id=1111',

    success:function(data){

        alert(data);

    },

    // async:false,

});

设置返回值类型 设置返回值类型

//设置返回值类型

$.ajax({

    url:'9-2.php?id=11',

    success:function(data){

        alert(data.a);

    },

    //jq接到后台的json字符串,转成对象后呈现给用户

    dataType:'json',

});

PHP后台代码 后台代码

// sleep(3);

if($_GET['id']==11){  //get

// if($_POST['id']==11){   //post

// echo 'jq_ajax';

    echo json_encode(['a'=>'2222']); //json 返回

}else{

    echo 'hhh';

}

GET 应用 

基本语法:

$.get(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式,xml, html, script, json, text, _default。

案例代码:

<script>

    $('#btu').click(function(){

        $.get('9-2.php',function(data){

            alert(data.a);

        },'json');

    });

</script>

但是注意:IE浏览器存在缓存问题;

解决缓存问题 解决缓存问题 修改:

<script>

    $('#btu').click(function(){

        var da = {_:new Date().getTime()};

        $.get('9-2.php',da,function(data){

            alert(data.a);

        },'json');

    });

</script>

POST 应用 应用

$.post(url, [data], [callback], [type])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式,xml, html, script, json, text, _default。

案例代码:

<script>

    $('#btu').click(function(){

        $.post('9-2.php',

        {id:'11'},

        function(data){

            alert(data.a);

        },'json');

    });

</script>

jQ中的跨域问题 中的跨域问题

Ajax技术受到浏览器同源策略的限制,禁止从一个域上向另外一个域发送请求。

也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。

QQ截图20170908152336.png

后台不同域下的PHP代码

$arr = ['a'=>1,'b'=>'san','c'=>'wu','d'=>4];

$str = json_encode($arr);

echo $_GET['fn']."($str)";

前端jq跨域的三种用法

<script>

    $('#btu').click(function(){

        //$.ajax 方法的jsonp跨域

        $.ajax({

            url:'http://bbs.com/1.php?fn=?',

            dataType:'jsonp',

            success:function(data){

                alert(data.b);

            }

        });

        //$.get 方法的jsonp跨域

        $.get('http://bbs.com/1.php?fn=?',function(data){

            alert(data.b);

        },'jsonp');

        

        //  $.getJSON 方法的jsonp跨域

        $.getJSON(

            'http://bbs.com/1.php?fn=?',

            function(data){

                alert(data.b);

            },

        );

    });

</script>


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • JAVA应用AJAX文乱码解决办法:1、ajax提交时采用escape或encodeURI方法,且必须使用2次;2、后台java用【java.net.URLDecoder】类decode方法。
    jquery.post和.ajax区别是【.post】底层由【.ajax】实现,两者是父子关系,代码为【post: function( url, data, callback, type ) {if

    2020-09-19

    643

    ajax栏目为大家介绍认识Ajax封装,避免代码冗余就可以借助函数思想,将ajax操作代码封装到一个函数,不同请求函数传递参数所有不同。
    JQ实现情人节表白程序,代码如正文,复制即可使用!
    jqueryajax()函数传值文乱码解决办法:1、提交前采用encodeURI两次编码;2、ajax配置contentType属性,加上【charset=UTF-8】。
    jquery和ajax区别:1、Ajax是一种异步请求技术,而jQuery对Ajax进行了封装,更方便我们使用;2、Ajax是一门技术,它提供了异步更新机制,而jQuery是一个库,它对JS进行了封装
    jqueryajax提交数据乱码解决办法:1、项目编码设置为【utf-8】;2、每个界面编码设置为【utf-8】;3、编写Encode编码过滤器,保证每个请求响应编码一致性;4、在【$.ajax
    php实现ajax提交form表单方法:1、创建一个HTML和PHP文件并创建form表单;2、通过“$.ajax({type: "post",url:"text7.php
    PHP运用jQueryAjax跨域调用实现代码,需要朋友可以参考下。
    ajax栏目最近写ajax与后台传输数据时候碰到了一个问题,我想ajax以json方式把数据传输个后台,后台用map形式接收,然后也以map形式传回数据。可是一直碰到前台报(*)...
    jqueryajax返回值为文乱码解决办法:1、【PrintWriter out = response.getWriter()】放在相关正确代码后面;2、jquery加【content-type】
    jQuery是一个轻量级"写少,做多"JavaScript库,它极大地简化了 JavaScript 编程,很容易学习。
    ajax和javascript区别:1、javaScript一种广泛用于客户端Web开发脚本语言,常用来给HTML网页添加动态功能;2、AJAX是一种创建交互式网页应用网页开发技术。
    解决javaajax提交返回值文乱码方法:1、在RequestMapping并发配置加代码【products=text/html;charset=UTF-8】;2、在文件【mvc:annotation-driven
    本文介绍了19道ajax经典面试题,希望可以提供大家参考。
    一些常见ajax常见面试问题,供大家参考。
    php ajax获取文乱码解决办法:1、执行“iconv('utf-8','gb2312',$_POST['Data']);)”代码;2、通过PHP从数据库读出文字符并转成json格式即可。
    ajax跟vue区别:1、Ajax是指一种创建交互式网页应用网页开发技术, 而Vue是一套用于构建用户界面渐进式JavaScript框架;2、Vue与单纯使用jQuery这种库相比,可以更好地实现代码复用
    ajax php文乱码解决办法:1、将所有数据统一使用utf-8编码;2、使用“function JSON($array) {}”和“arrayRecursive”两个函数,对每个字符分别编码即可。
    jquery$符号冲突解决方法:使用【jQuery.noConflict([extreme])】方法解决,代码为【var $jq = jQuery.noConflict(true);console.log