首页前端开发JavaScript如何利用Javascript发送GET/POST请求?(实例详解)

如何利用Javascript发送GET/POST请求?(实例详解)

时间2024-01-31 02:35:02发布访客分类JavaScript浏览906
导读:收集整理的这篇文章主要介绍了如何利用Javascript发送GET/POST请求?(实例详解),觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来了如何利用Javascript发送GET/POST请求的相关知识,仅用form...
收集整理的这篇文章主要介绍了如何利用Javascript发送GET/POST请求?(实例详解),觉得挺不错的,现在分享给大家,也给大家做个参考。本篇文章给大家带来了如何利用Javascript发送GET/POST请求的相关知识,仅用form提交的话,后台就需要做非常复杂的判断,下面我们居来看一下怎样利用JavaScript来提交,希望对大家有帮助。

基于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请求?(实例详解)的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

javascript前端

若转载请注明出处: 如何利用Javascript发送GET/POST请求?(实例详解)
本文地址: https://pptw.com/jishu/593367.html
JS中 includes() vs indexOf(),聊聊它们有什么区别 在C,C ++和C#中的Int是什么

游客 回复需填写必要信息