前端学习——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)
blank

相关推荐

  • 07_配置Yarn和MapReduce

    07_配置Yarn和MapReduce

  • 如何将ER图转化为关系模型(超详细、含例题)「建议收藏」

    如何将ER图转化为关系模型(超详细、含例题)「建议收藏」本文转载自:http://blog.csdn.net/HaoDaWang/article/details/78098937?locationNum=4&fps=1超级感谢博主分享本篇博文中的例题只涉及到N:M和N:M:P的转换,大家看完后可以再去看下百度文库里面的这个例题,这个例题几个转换准则都用到了。https://wenku.baidu.com/view/33849a73a…

  • RFID-MFRC522射频识别模块,S50卡M1

    RFID-MFRC522射频识别模块,S50卡M1射频识别模块什么是RFIDMFRC522S50-M1卡1、主要指标2、存储结构RC522与ArduinoUNO的接线什么是RFID无线射频识别即射频识别技术(RadioFrequencyIdentification,RFID),是自动识别技术的一种,通过无线射频方式进行非接触双向数据通信,利用无线射频方式对记录媒体(电子标签或射频卡)进行读写,从而达到识别目标和数据交换的目的。MF…

  • kettle基础教程-kettle9教程「建议收藏」

    kettle基础教程-kettle9教程「建议收藏」一.安装部署1.JDK1.8安装及环境变量的配置https://blog.csdn.net/weixin_39549656/article/details/795406442.kettle9安装与启动kettle下载目录:https://sourceforge.net/projects/pentaho/files/kettle9.2下载地址:https://sourceforge.net/projects/pentaho/files/Pentaho-9.2/client-tool

  • 最大似然估计详解

    最大似然估计详解&nbsp&nbsp最大似然估计是建立在最大似然原理的基础之上。最大似然原理的直观理解是:设一个随机试验有若干个可能的结果A1,A2,…,An,在一次试验中,结果Ak出现,则一般认为实验对Ak的出现最有利,即Ak出现的概率较大。这里用到了”概率最大的事件最可能出现”的直观想法,然后对Ak出现的概率公式求极大值,这样便可解未知参数。下面用一个例子说明最大似然估计的思想方法。&nbsp&nbsp假设一个

    2022年10月29日
  • Java实习入职华为,半年后我跑路了

    Java实习入职华为,半年后我跑路了0前言全是干货的技术殿堂文章收录在我的GitHub仓库,欢迎Star/fork:Java-Interview-Tutorialhttps://github.com/Wasabi1234/Java-Interview-Tutorial1何来?我,一个双非本科渣渣,有幸在19届的秋招中得到前东家华为(以下简称hw)的赏识,当时秋招签订就业协议,当时18年10月签订三方后Hr通知说是入了某java部门,之后一系列组织架构调整原因等等让人无法理解的骚操作,最终在毕业前夕的五

发表回复

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

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