如何利用Javascript发送GET/POST请求「建议收藏」

如何利用Javascript发送GET/POST请求「建议收藏」如何利用Javascript发送GET/POST请求最近在做基于TWS的分析系统,因为采用Flask+Java的技术架构方案,所以需要开发Web,然而我自己没有做过类似的开发,所以很多工作是从头开始学着做的。因此,在实现表单数据提交的时候,当时就想到个问题,如果一个页面里内容足够多的话,仅用form提交的话,后台就需要做非常复杂的判断,以此确认用户提交的是哪类数据,这样工程不仅难看,而且低效。于是咨

大家好,又见面了,我是你们的朋友全栈君。

基于JQuery的GET/POST数据提交方式

如果初学Javascript,对于JQuery可能会跟我一样完全不清楚,所以适当的普及一下JQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。JQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。JQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

JQuery的官网地址,可以点击访问。根据官方给出的版本,目前最新的已经到了v3.2.1,因此建议可以考虑去官网下载最新的JQuery,以次获得更多的特性。

JQuery很强大,但实现当前这个功能需要的仅仅是简单的两个,API,完整的API说明文档可以点击查看,此外,在runnoob.com上也有关于Javascript的学习资料

$.get(url, data, callback)

参数 描述
url 必需,规定您需要请求的URL
data 可选,规定连同请求发送到服务器的数据,格式是json
callback 可选,回掉函数,当请求成功时运行的函数

$.post(url, data, callback)

参数 描述
url 必需,规定您需要请求的URL
data 可选,规定连同请求发送到服务器的数据,格式是json
callback 可选,回掉函数,当请求成功时运行的函数

使用方法是这样的,首先,在需要调用JQuery的页面里,用script标签导入Jquery文件,例如:

	<script src="static/js/jquery-3.2.1.min.js"></script>

然后,网页空白的地方,申明你的方法以及需要传递的参数,你可以这样做:

	<script>
		function doPost(url)
		{
			var val1 = document.getElementsByName("key1").value;
			var val2 = document.getElementsByName("key2").value;

			$.post(url, {'key1':val1, 'key2':val2});
		}
	</script>

接着,在你的input/button标签或者需要发送数据的地方,增加一个onclick的属性,例如:

	...
	<input type="button" value="submit" onclick="doPost('/')" />
	...

这样就可以使用JQuery发送数据了。

另外一种方法,是构造一个form,利用form来进行提交。

使用Javascript/form提交GET/POST数据提交方式

/*
* @url: url link
* @action: "get", "post"
* @json: {'key1':'value2', 'key2':'value2'} 
*/
function doFormRequest(url, action, json)
{
    var form = document.createElement("form");
    form.action = url;
    form.method = action;

    // append input attribute and valus
    for (var key in json)
    {
        if (json.hasOwnProperty(key))
        {
            var val = json[key];
            input = document.createElement("input");
            input.type = "hidden";
            input.name = key;
            input.value = val;

            // append key-value to form
            form.appendChild(input)
        }
    }

    // send post request
    document.body.appendChild(form);
    form.submit();

    // remove form from document
    document.body.removeChild(form);
}

调用方法很简单,把这个代码块copy到你自己的HTML文档里的script标签内,然后就可以直接用了,选择GET/POST方法根据你自己的需要就行。
具体在使用过程中有什么区别,得你自己慢慢体会了。

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/145164.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 服务器降级特技

    服务器降级特技高并发系统之降级特技原文:http://jinnianshilongnian.iteye.com/blog/2306477如侵犯您的权益,请及时给我发邮件告知,我会尽快删除。​在开发高并发系统时有三把利器用来保护系统:缓存、降级和限流。之前已经有一些文章介绍过缓存和限流了。本文将详细聊聊降级。当访问量剧增、服务出现问题(如响应时间慢或不响应)或非核心服务影响到核心流程的性能

    2022年5月20日
    29
  • linux shell 循环处理文件夹每个文件

    linux shell 循环处理文件夹每个文件在linux下,如果有一个文件夹,下面有好几个文件。每个文件如abc.csv这种格式。我想一个个处理文件,并且取得前缀abc,生成新文件abc.text.代码如下。注意我这里采用的是把*.cnf处理成*.csvfeatureSAT12是我需要调用的程序,在DIMACS上一个文件夹。#!/bin/bashPATH=”DIMACS”//最好使用绝对路径cd$PATHfor

    2022年7月24日
    6
  • java断言assertequals_junit 方法:assertEquals 和 assertTrue

    java断言assertequals_junit 方法:assertEquals 和 assertTrueassertEquals和assertTrue区别相同之处:都能判断两个值是否相等assertTrue如果为true,则运行success,反之FailureassertEquals如果预期值与真实值相等,则运行success,反之Failure不同之处:assertEquals运行Failure会有错误提示,提示预期值是xxx,而实际值是xxx。容易调式assertTrue没有错误…

    2022年7月13日
    10
  • 基于java的选课系统课程设计_java学生管理系统界面设计

    基于java的选课系统课程设计_java学生管理系统界面设计Java课程设计_学生选课管理系统需求分析本数据库的用户主要是学生,通过对用户需求的收集和分析,获得用户对数据库的如下要求。1.信息需求学生信息:学号,姓名,性别,专业登陆信息:账号,密码课程信息:课程号,课程名,选课人数,选课容量,任课老师选课信息:课程号,学生学号登录信息:账号、密码2.功能需求系统为学生建立登陆信息,学生进入系统前需要身份验证,用户名、密码输入正确后方可进入系统。在系统中,用户可以在界面中看到本人的基本信息,也可以对课程信息表和个人选课信息表进行查看、以及

    2022年8月31日
    6
  • Java输入输出

    源代码见:点击打开链接引言:在平时java开发中,被输入输出搞得头疼。特此写下这篇博客,一是为了总结输入输出,二是为了和大家分享。如果大家觉得写得好,就请高抬贵手点个赞呗!!!1.输入格式,输出格式控制1.1输入处理java的输入,我们用到Scanner类,可以用它创建一个对象Scannerreader=newScanner(System.in);…

    2022年4月3日
    47
  • SQL中IS NOT NULL与!=NULL的区别

    SQL中IS NOT NULL与!=NULL的区别平时经常会遇到这两种写法:ISNOTNULL与!=NULL。也经常会遇到数据库有符合条件!=NULL的数据,但是返回为空集合。实际上,是由于对二者使用区别理解不透彻。默认情况下,推荐使用ISNOTNULL去做条件判断,因为SQL默认情况下对WHEREXX!=Null的判断会永远返回0行,却不会提示语法错误。这是为什么呢?SQLServer文档中对Null值的

    2022年6月9日
    65

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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