ajax get请求_python测试开发django50.jquery发送Ajax请求(get)

前言

有时候,我们希望点击页面上的某个按钮后,不刷新整个页面,给后台发送一个请求过去,请求到数据后填充到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这句:

html>


    
    天气



     

获取天气,返回json数据

点我!,获取json数据


当点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);
    });
});

f210f83eee80427c458cba0316df07af.png

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

d4da0caa0d02f791e25507bde5048100.png

jQuery脚本

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

html>


    
    天气






     

获取天气,返回json数据

点我!,获取json数据


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

ad99948da7e04e71606ca058e87e2d0c.png

Ajax方式

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

$("#weather").click(function() {
        var username = $(this).val();
        $.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); 
        }
    })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/338994.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

primefaces_PrimeFaces Mobile入门

primefaces介绍 如果您已经开发了利用PrimeFaces的应用程序,或者打算开发可在台式机和移动设备上使用的Web应用程序,请考虑将PrimeFaces Mobile用于您的移动实施。 这篇博客文章将介绍一些基础知识,以帮助您开始为现有的PrimeFaces应用程序开…

C语言指针这些使用技巧值得收藏!

指针用的好犹如神助,用不好会让你叫苦连连,但大多数人是用不好指针的,所以后来的很多语言都把指针封装,屏蔽。比如JAVA,java是没有指针的,但是很多地方都用到指针,不过不对用户开放,…

mysql数据库中的int类型_MySQL中int(M)和tinyint(M)数值类型中M值的意义

在一开始接触MySQL数据库时,对于int(M)及tinyint(M)两者数值类型后面的M值理解是最多能够插入数据库中的值不能大于M;后来工作后,也是一边学习一边使用,之后的理解是其中的M的意思是插入数据库中的值的字符长度不能大于M&#xff…

api怎么写_使用Node.js原生API写一个web服务器

Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点。一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa。但是Express和Koa都是对Node.js原生API的封装,所以其实不…

C语言预处理命令分类和工作原理

C语言编程过程中,经常会用到如 #include、#define 等指令,这些标识开头的指令被称为预处理指令,预处理指令由预处理程序(预处理器)操作。相比其他编程语言,C/C 语言更依赖预处理器,故在阅读或开…

查看mysql用户权限_mysql 如何查看该数据库用户具有哪些权限?

展开全部背景在了解动态权限之前,我们先回顾下 MySQL 的权限列表。权限列表大体分为服务级别和表级别,列级别以32313133353236313431303231363533e59b9ee7ad9431333433633464及大而广的角色(也是MySQL 8.0 新增)存储程序等权限。我们看到有一个特殊的 SU…

注释嵌套注释_注释,无处不在的注释

注释嵌套注释十年前的2004年 , Java 1.5开始提供注释。 很难想象没有此功能的代码。 实际上,首先引入了注释,以减轻开发人员编写繁琐的样板代码的痛苦,并使代码更具可读性。 考虑一下J2EE 1.4(没有可用的注释&#xff…

a标签跳到另一个页面指定选项卡_HTML常用标签

本篇文章主要是对a、img和table标签用法介绍:a标签:可称为锚元素,主要功能是创建通向其他网页、文件、同一页面的其他位置、电子邮件地址或其他任何url地址的超链接;1.img标签:发出get请求并显示返回的图片1.常用属性&…

c语言也能用模板方法模式?

模式动机在嵌入式的应用场景中,管理资源(例如文件、内存)是一件非常麻烦、非常容易出错的事情。因为在分配资源后,还必须释放资源。例如fopen()打开文件后,必须要使用fclose()来关闭文件,而使用malloc申请内存资源后,就…

游戏 服务器 微服务_整体服务器与微服务

游戏 服务器 微服务介绍 刚开始时,由于要求简单,所以应用程序既简单又小。 随着时间的要求和需求的增长,我们的应用程序变得越来越大,越来越复杂。 这就导致了将单片服务器开发和部署为一个单元。 在某种程度上,微服务…

数据与ELF数据节-计算机系统基础题目

实验内容:修改二进制可重定位目标文件“phase1.o”的数据(.data)节内容(不允许修改其他节),使其与main.o模块如下链接后运行时输出目标字符串“123456789”。 实验步骤: 1. 使用objdump工具获得…

sqlserver拼接sql插入table_10个SQL技巧

介 绍为了理解这 10 个 SQL 技巧的价值,首先需要了解下 SQL 语言的上下文。为什么我要在 Java 会议上讨论 SQL 呢?(我可能是唯一一个在 Java 会议上讨论 SQL 的了)下面讲下为什么:从早期开始,编程语言设计者就有这种的愿望&#x…

【C语言笔记】指定初始化器

C99增加了一个新特性:指定初始化器(designated initializer)。利用该特性可以初始化指定的数组元素,也可以初始化指定的结构体变量。本文主要分享:使用指定初始化器初始化数组。例如,只初始化数组中的最后一个元素。对于传统的C初…

java锁性能对比_提高Java的锁性能

java锁性能对比Plumbr是唯一可以通过解释应用程序性能数据来自动检测Java性能问题根本原因的解决方案。 几个月前,我们在Plumbr中引入了锁定线程检测之后,我们开始收到类似于“嘿,太好了,现在我知道是什么导致了性能问题&#xf…

binlog日志_MySQL三大日志binlog、redo log和undo log

点击蓝色“JavaKeeper”关注我哟加个“星标”,一起成长,做牛逼闪闪的技术人Keeper导读:日志是mysql数据库的重要组成部分,记录着数据库运行期间各种状态信息。mysql日志主要包括错误日志、查询日志、慢查询日志、事务日志、二进制…

C 语言精髓之变参函数

我们以 printf 这个 very 熟悉的函数为例,来分析一下变参函数。先看下 printf 函数的定义:int printf(const char *fmt, ...){ int i; int len; /* va_list 即 char * */va_list args;va_start(args, fmt); /* 内部使用了 va_arg() */len v…

lambda捕获this_非捕获Lambda的实例

lambda捕获this大约一个月前,我在Java 8的lambda表达式框架下总结了Brian Goetz的观点 。 目前,我正在研究有关默认方法的文章,令我惊讶的是,我又回到了Java处理lambda表达式的方式。 这两个功能的交集可能会产生微妙但令人惊讶的…

mysql8 安装_MySQL8.x安装使用

1.下载网址https://dev.mysql.com/downloads/mysql/下载要登录,可以使用Oracle账户登录2.安装MySQL服务下载好的解压到D:developer目录下配置MySQL(windows下是my.ini,Linux下是my.cnf)[mysql]# 设置mysql客户端默认字符集default-character-setutf8[mys…

从原理到方法,一文讲清如何应对C语言内存泄露!

可能不少开发者都遇到过内存泄漏导致的网上问题,具体表现为单板在现网运行数月以后,因为内存耗尽而导致单板复位现象。一方面,内存泄漏问题属于比较浅显的错误,此类问题遗漏到现网,影响不好;另一方面&#…

openshift_OpenShift上具有NetBeans的Java EE

openshift今天是慕尼黑的NetBeans日 。 我很高兴提出一个关于将Red Hat产品与我著名的IDE集成的会议。 因此,我一直在谈论WildFly , EAP ,Git和OpenShift Online,并展示了使用该工具集优化开发工作流程的所有不同方式。 大约有10…