前端学习——JQuery Ajax使用经验

前端学习——JQuery Ajax使用经验

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

0.前言
    在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等。通过博文整理总结希望自身有所提高。
    在这里通过一个加法样例说明问题.为了突出ajax,前端网页和后端PHP程序尽可能的简单。
    【前端】——add.html
前端学习——JQuery Ajax使用经验

前端学习——JQuery Ajax使用经验
图1 add页面

    【后端】——add.php

<?php
// 返回JSON格式
header('Content-Type:application/json;charset=utf-8');
$result = array();
$result["result"] = $_GET["a"] + $_GET["b"];
echo json_encode($result, JSON_NUMERIC_CHECK);
?>


    【代码仓库】——
test-jquery-ajax

     代码仓库位于bitbucket使用Hg(而不是Git),Hg在windows或ubuntu上均有非常好用的GUI工具——TortoiseHg,本人愚笨没能熟练掌握Git。

    【
TortoiseHg使用说明】——假设没有使用过Hg请參考博文hg clone部分操作就可以。   
    【
JQuery 中文API


1.经常使用的getJSON

    在项目推进过程中使用的最多的便是getJSON,getJSON可从server获得一个JSON数据包,请注意若使用JSON格式serverHTTP首部中应包括application/json信息,否则会产生兼容性问题(简单说IE就可能出问题)。

    var submit_async = function() {
        $.getJSON('add.php', { 
            a: $('input[name="a"]').val(),
            b: $('input[name="b"]').val()
        }, 
        function(data) {
            $('#result').text(data.result);
        });
    };


    【HTTP请求和响应】
前端学习——JQuery Ajax使用经验

前端学习——JQuery Ajax使用经验
图2 完整的HTTP请求和响应

2.防止浏览器使用缓存

    浏览器为了加快执行速度,假设重复请求同一个URL,那么浏览器会使用缓存中的内容而不在向server又一次请求。为了防止浏览器使用缓存,能够在URL之后添�一些变化的内容,最经常使用的方法便是添�当前时间的毫秒值,比如添�&now=<当前时间毫秒值>。(即使用这样的方法也存在一些“顽固派”,比如执行iOS6系统的safari浏览器)。

    var submit_async = function() {
        $.getJSON('add.php', { 
            a: $('input[name="a"]').val(),
            b: $('input[name="b"]').val(),
            now: new Date().getTime() // 防止浏览器使用缓存
        }, 
        function(data) {
            $('#result').text(data.result);
        });
    };


    【HTTP请求和响应】
前端学习——JQuery Ajax使用经验

前端学习——JQuery Ajax使用经验
图3 完整的HTTP请求和响应

3.使用同步方式

    getJSON方法并没有同步选项,假设使用同步方式可使用ajax原生方法。同步方式须要设置async选项为false。
    var submit_sync = function() {
        $.ajax({
            type: "get",
            url: 'add.php',
            async: false, // 使用同步方式
            data: {
                a: $('input[name="a"]').val(),
                b: $('input[name="b"]').val(),
                now: new Date().getTime() // 注意不要在此行添加�逗号
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            // cache: false,
            success: function(data) {
                $('#result').text(data.result);
            } // 注意不要在此行添加�逗号
        });
    }

    【HTTP请求和响应】
    HTTP请求和响应同图3.

4.再议防止浏览器使用缓存

    在ajax方法中有一个
cache选项,假设设置为cache:false意为禁止浏览器缓存。实现的方法和【2】很相似,该參数在URL之后添�&_=<当前时间毫秒值>
    var submit_sync = function() {
        $.ajax({
            type: "get",
            url: 'add.php',
            async: false, // 使用同步方式
            data: {
                a: $('input[name="a"]').val(),
                b: $('input[name="b"]').val()
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function(data) {
                $('#result').text(data.result);
            } // 注意不要在此行添加�逗号
        });
    }

    【HTTP请求和响应】
前端学习——JQuery Ajax使用经验

前端学习——JQuery Ajax使用经验

图4 完整的HTTP请求和响应
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118654.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 栈 队列 优先队列

    栈 队列 优先队列

  • googlenet优点_googlenet提出的inception结构优势

    googlenet优点_googlenet提出的inception结构优势googlenet是2014年imagenet的冠军,同年还有VGG。因此在说googlenet之前,先回顾下VGG。之前介绍过fasterRCNN,fasterRCNN底层的模型官方支持了VGG和ZF,同样在K80下,ZF大概是8fps的速度,而VGG大概是3fps,这无疑就说明了VGG有些重。再给个直观的感受,通常我们VGG的fasterRCNN模型大概是400M左右,而goog…

  • ov7725摄像头人脸识别_图像采集是干什么的

    ov7725摄像头人脸识别_图像采集是干什么的目前FPGA用于图像采集传输处理显示应用越来越多,主要原因是图像处理领域的火热以及FPGA强大的并行处理能力。本文以OV7725为例,对摄像头使用方面的基础知识做个小的总结,为后续做个铺垫。  XCLK:工作时钟输入,由主控器产生,频率为24MHz;    HREF:行参考信号输出;  PCLK:像素时钟输出,由XCLK产生,用于控制器采样图像数据(时钟速率&amp;lt;5n…

  • cocos2d-x 10.1版本 http 链接

    cocos2d-x 10.1版本 http 链接

  • Ubuntu18.04搭建源码搜索引擎Opengrok

    Ubuntu18.04搭建源码搜索引擎OpengrokTableofContents1OpenGrok介绍2安装OpenGrok2.1安装JAVA运行环境2.2安装Web服务器-Tomcat2.3安装OpenGrok2.4配置OpenGrok2.5安装 universal-ctags2.6建立源码索引2.6更新源码索引1OpenGrok介绍OpenGrok isafastand…

  • SQL SERVER的QUOTENAME函数

    SQL SERVER的QUOTENAME函数quotename使函数中的输入成为一个有效的标识符selectQUOTENAME(‘dddd’) 返回[dddd]selectQUOTENAME(‘dddd’,'”‘)返回”dddd”首先,sqlserver里的标识符有一定的规则,比如 你 createtableabc123(…) 那么中间含有空格,它不是符合规则的。 

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号