• 技术文章 >web前端 >js教程

    ajax的应用实战解析

    php中世界最好的语言php中世界最好的语言2018-04-04 13:46:17原创522
    这次给大家带来ajax的应用实战解析,ajax应用实战的注意事项有哪些,下面就是实战案例,一起来看一下。

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

    AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

    AJAX 是一种用于创建快速动态网页的技术。

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

    •"xml": 返回 XML 文档,可用 jQuery 处理。

    •"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。

    •"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)

    •"json": 返回 JSON 数据 。

    •"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数

    •"text": 返回纯文本字符串

    一、前台传递字符串变量,后台返回字符串变量(非json格式) 

      这里,为了解决Ajax数据传递出现的汉字乱码,在字符串传递之前,使用javascript函数escape()对汉字字符串进行了编码,并且对返回

    的字符串使用unescape()函数进行解码,使得汉字得以正常显示。当然了,后台PHP代码也添加了头文件,以保证汉字字符串不会出现乱码。各种后台代码解决

    汉字乱码问题的方式如下:

    PHP:header('Content-Type:text/html;charset=GB2312');

     Javascript代码:

    $(function(){
    var my_data="前台变量";
    my_data=escape(my_data)+"";//编码,防止汉字乱码
    $.ajax({
    url: "ajax_php.php",
    type: "POST",
    data:{trans_data:my_data},
    //dataType: "json",
    error: function(){
    alert('Error loading XML document');
    },
    success: function(data,status){//如果调用php成功
    alert(unescape(data));//解码,显示汉字
    }
    });
    });

     PHP代码:

    header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
    $backValue=$_POST['trans_data'];
    echo $backValue."+后台返回";

    二、前台传递多个一维数组,后台返回字符串变量(非json格式)

      在非json格式下,后台只能返回字符串,如果想后台返回数组,可以采用json格式,在本文的后面会详细介绍。

    Javascript代码:

    $(function(){
    var my_data=new Array();
    var my_data1=new Array();
    my_data[0]=0;
    my_data[1]=1;
    my_data[2]=2;
    my_data1[0]=10;
    my_data1[1]=11;
    my_data1[2]=12;
    $.ajax({
    url: "ajax_php.php",
    type: "POST",
    data:{trans_data:my_data,trans_data1:my_data1},
    //dataType: "json",
    error: function(){
    alert('Error loading XML document');
    },
    success: function(data,status){//如果调用php成功
    alert(data);
    }
    });
    });

    PHP代码:

    //读取第一个数组
    $backValue="trans_data:";
    $trans=$_POST['trans_data'];
    foreach($trans as $value)
    {
    $backValue=$backValue." ".$value;
    }
    //读取第二个数组
    $backValue=$backValue." , trans_data1:";
    $trans=$_POST['trans_data1'];
    foreach($trans as $value)
    {
    $backValue=$backValue." ".$value;
    }
    echo $backValue;

    三、前台传递多个一维数组,后台返回二维数组(json格式)

    Javascript代码:

    $(function(){
    var my_data=new Array();
    var my_data1=new Array();
    my_data[0]=0;
    my_data[1]=1;
    my_data[2]=2;
    my_data1[0]=10;
    my_data1[1]=11;
    my_data1[2]=12;
    $.ajax({
    url: "ajax_php.php",
    type: "POST",
    data:{trans_data:my_data,trans_data1:my_data1},
    dataType: "json",
    error: function(){
    alert('Error loading XML document');
    },
    success: function(data){//如果调用php成功
    }
    alert(back);
    }
    });
    });

     PHP代码:

    header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
    $backValue=array();
    $backValue[0]=$_POST['trans_data'];
    $backValue[1]=$_POST['trans_data1'];
    echo json_encode($backValue);

    四、前台传递一维数组和二维数组,后台返回二维数组(json格式)

    Javascript代码:

    $(function(){
    var my_data=new Array();
    var my_data1=new Array();
    var my_data2=new Array();
    my_data[0]=0;
    my_data[1]=1;
    my_data[2]=2;
    my_data1[0]=10;
    my_data1[1]=11;
    my_data1[2]=12;
    my_data2[0]=my_data;
    my_data2[1]=my_data1;
    $.ajax({
    url: "ajax_php.php",
    type: "POST",
    data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},
    dataType: "json",
    error: function(){
    alert('Error loading XML document');
    },
    success: function(data){//如果调用php成功
    }
    alert(back);
    }
    });
    });

    PHP代码:

    header('Content-Type:text/html; charset=gb2312');//使用gb2312编码,使中文不会变成乱码
    $backValue=array();
    $backValue=$_POST['trans_data2'];
    $backValue[2]=$_POST['trans_data'];
    $backValue[3]=$_POST['trans_data1'];
    echo json_encode($backValue);

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    AjaxToolKit怎么使用Rating控件

    Ajax中readyState与status应该怎么使用

    以上就是ajax的应用实战解析的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:ajax 解析 应用
    上一篇:HTML5+ajax怎么做出预览图片效果 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 聊聊用pkg将Node.js项目打包为可执行文件的方法• 手把手带你了解Angular中的依赖注入• Node实战:运用Cookie&Session进行登录验证• jQuery插件分享:Turn.js实现一个移动端电子书翻页效果• Angular学习之聊聊notification(自定义服务)
    1/1

    PHP中文网