站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

如何利用Javascript发送GET/POST请求?(实例详解)基于JQuery的GET/POST数据提交方式使用Javascript/form提交GET/POST数据提交方式

时间:2021-12-22 [网络编程]作者:fabuyuan 浏览:7 次

本篇文章给大家带来了如何利用Javascript发送GET/POST请求的相关知识,仅用form提交的话,后台就需要做非常复杂的判断,下面我们居来看一下怎样利用JavaScript来提交,希望对大家有帮助。

如何利用Javascript发送GET/POST请求?(实例详解)基于JQuery的GET/POST数据提交方式使用Javascript/form提交GET/POST数据提交方式

基于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方法根据你自己的需要就行。
具体在使用过程中有什么区别,得你自己慢慢体会了。

【相关推荐:javascript学习教程

以上就是如何利用Javascript发送GET/POST请求?(实例详解)的详细内容,更多请关注站长家园其它相关文章!

本文标签:  javascript前端html

转载请注明来源:如何利用Javascript发送GET/POST请求?(实例详解)基于JQuery的GET/POST数据提交方式使用Javascript/form提交GET/POST数据提交方式

本文永久链接地址:https://www.adminjie.com/post/6709.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • mysql怎样in查询操作排序

      mysql怎样in查询操作排序

      在mysql中,可利用“ORDERBY”子句配合SELECT语句in查询来操作排序,语法为“select*from表名where字段值in(排序1,排...

    • docker能用yum命令吗

      docker能用yum命令吗

      docker能用yum命令,docker容器内安装yum的方法:1、通过“apt-getupdate”更新apt-get指令;2、通过“apt-getins...

    • 如何解决docker telnet不通的问题

      如何解决docker telnet不通的问题

      dockertelnet不通的解决办法:1、查看配置文件;2、修改nginx配置文件的端口为80;3、重新加载即可。本文操作环境:centOS6.8系统、Do...

    • css怎样改变一个图片高度和宽度

      css怎样改变一个图片高度和宽度

      在css中,可以使用width和height属性来改变一个图片高度和宽度,只需要给图片元素添加“width:宽度值;height:高度值;”样式即可。width...

    • docker不能删除镜像怎么办

      docker不能删除镜像怎么办

      docker不能删除镜像的解决办法:1、删除REPOSITORY;2、删除IMAGEID;3、通过“dockerimages”查看镜像即可。本文操作环境:c...

    热门文章