前言

有时候，我们希望点击页面上的某个按钮后，不刷新整个页面，给后台发送一个请求过去，请求到数据后填充到html上，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax可以完美的实现。

jQery和Ajax

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

特点： jQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便的操作HTML元素，拥有很好的可扩展性，拥有不少插件。

描述：

  • 对于程序员来说，简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
  • 对于用户来说，改善了页面的视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。
  • javaScript框架实际上是一系列工具和函数。

AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。

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

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

案例实践

需实现的效果：当点击页面上某个元素时，发送一个get请求，服务端返回json数据，从返回的json数据里面提出我想要的数据，然后alter弹窗显示出来

网页中添加jquery有两种方式，一种是从 jquery.com下载 jQuery 库，放到本地项目中，另外一种从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

我这里是从CDN中载入，里面加上这句：<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>天气</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

     <div style="margin: 15% 40%;">

         <p>获取天气，返回json数据</p>

         <button  id="weather">点我！，获取json数据</button>

    </div>

</body>

</html>

当点button按钮时，访问的接口相关内容如下（需提前准备好接口数据，可以在django里面写个接口返回）：

接口访问url： weather_code/

请求方式：get

请求参数：city=上海&time=2019-04-05

返回数据(json)：{"error_code": 1, "reason": "success", "weather_code": 1, "weather_name": "晴天", "city": "上海"}

在django里面写个访问页面地址:http://localhost:8000/weather_web/,打开谷歌浏览器Console调试

$("#weather").click(function(){

    $.get("/weather_code/",

    {

        city:"上海",

        time:"2019-04-05"

    },

        function(result){

        alert("返回数据: \n" + "reason:"+ result.reason +"\n"+"weather_name:"+ result.weather_name);

    });

});

点完按钮之后，弹出alert，返回的是json数据，json里面取出key对应的值,如：result.key名称

jQuery脚本

把jQuery脚本整合到html内容中，语法格式：$.get(url,[data],[success])

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>天气</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>

$(document).ready(function() {

    $("#weather").click(function () {

        $.get("/weather_code/",

                {

                    city: "上海",

                    time: "2019-04-05"

                },

                function (result) {

                    alert("返回数据: \n" + "reason:" + result.reason + "\n" + "weather_name:" + result.weather_name);

                });

    });

})

</script>

</head>

<body>

     <div style="margin: 15% 40%;">

         <p>获取天气，返回json数据</p>

         <button  id="weather">点我！，获取json数据</button>

    </div>

</body>

</html>

加上jQuery脚本后，点button会发一个get请求，可以使用抓包工具看得到

Ajax方式

下面这种写法看起来更加直观，更加规范一点

$("#weather").click(function() {

        $.ajax({

            "url" : "/weather_code/",    //提交URL

            "type" : "Get",//处理方式

            "data" : {

                    "city": "上海",

                    "time": "2019-04-05"

                },//提交的数据

            "dataType" : "json",//指定返回的数据格式

            "success" : callback,//执行成功后的回调函数

            "async" : "false",//是否同步

            //错误后执行

            "error" : function() {

                alert("请求失败！")

            }

        });

        function callback(result) {

            alert("返回数据111: \n" + "reason:" + result.reason + "\n" + "weather_name:" + result.weather_name);

        }

    })

python测试开发django-50.jquery发送ajax请求(get)的更多相关文章

  1. jQuery发送ajax请求

    利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...

  2. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

  3. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  4. 学习AJAX必知必会（4）~JQuery发送Ajax请求

    一.JQuery发送Ajax请求 ■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数 ...

  5. IE9下JQuery发送ajax请求失效

    最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题. 目前有两种解决方案:   解决方案一: 设置浏览 ...

  6. jQuery发送Ajax请求以及出现的问题

    普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data ...

  7. 第十六章：Python の Web开发基础(三) jQuery与Ajax

    本課主題 jQuery 介绍 Ajax 介绍 jQuery 介绍 选择器 jQuery 的选择器分不同的种类,主要目的是用来查找目标的 HTML 标签,方便对目标标签进行操作,比如找到 <li& ...

  8. jquery发送ajax请求返回数据格式

    jquery向服务器发送一个ajax请求后,可以返回多种类型的数据格式,包括:html,xml,json,text等. 1.html格式的数据 "<div class='comment ...

  9. 关于解决JQuery发送Ajax请求后，IE缓存数据不更新的问题

    http://www.cnblogs.com/lys_013/archive/2013/08/07/3243435.html 今天在做ajax页面无刷新请求后台服务器数据的时候,IE下遭遇Ajax缓存 ...

随机推荐

  1. 【Arduino】开源开发板说明

    来自世界各地的新型微控制器层出不穷,这类开发板多数都是通过Arduino改进的版本,例如由Arduino所改良的Yún一样,主要是针对网状网路进行改进或升级了其它无线功能. 但一些开发板也有着其独到的 ...

  2. MySQL事务提交过程（二）

    上一篇文章我们介绍了在关闭binlog的情况下,事务提交的大概流程.之所以关闭binlog,是因为开启binlog后事务提交流程会变成两阶段提交,这里的两阶段提交并不涉及分布式事务,当然mysql把它 ...

  3. appium---第三个脚本，进行模拟登陆

    我这边模拟的是第三方QQ登陆 刚开始顺风顺水,启动--我的--点击头像--跳转登陆--点击QQ登陆,以上都可以通过id寻找,因为都是同一个包名下,肯定有id,如果没有,一定是技术忘记了 ..... 然 ...

  4. python--实践--模拟浏览器（http）登陆

    #方法一:直接使用coookies登陆,此方法需要提前在浏览器中使用账号密码登陆后,获取浏览器中的cookies,在构造的请求中携带这个cookies(缺点是有时效性). #方法二:通过账号密码(Fr ...

  5. 桐桐的数学游戏（N皇后）

    题目描述 相信大家都听过经典的“八皇后”问题吧?这个游戏要求在一个8×8的棋盘上放置8个皇后,使8个皇后互相不攻击(攻击的含义是有两个皇后在同一行或同一列或同一对角线上). 桐桐对这个游戏很感兴趣,也 ...

  6. 007 linux环境下的伪分布式环境搭建

    本文的配置环境是VMware10+centos2.5. 在学习大数据过程中,首先是要搭建环境,通过实验,在这里简短粘贴书写关于自己搭建大数据伪分布式环境的经验. 如果感觉有问题,欢迎咨询评论. 零:下 ...

  7. IDEA创建javaSE项目

  8. TensorFlow图像预处理-函数

    更多的基本的API请参看TensorFlow中文社区:http://www.tensorfly.cn/tfdoc/api_docs/python/array_ops.html 下面是实验的代码,可以参 ...

  9. 爬虫之 beautifusoup4

    1. 使用方法 2.解析器 3. 详细用法 4. find_all方法 5. 遍历文档树

  10. 从URL输入到页面展现到底发生什么

    前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解!   从URL输入到页面展现 总体来说分为以下几个过程: DNS ...