Javascript编程 —— 发送GET/POST请求_javascript post-程序员宅基地

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/poisonchry/article/details/77649398

智能推荐

Mendix基于SonarQube的代码扫描_mend io 扫描前端项目-程序员宅基地

文章浏览阅读415次。在整个产品的Devops环节中,代码扫描是比较关键的一个环节,常见的工具有findbugs 、pmd、SonarQube等。SonarQube是一个代码质量管理的开源平台,用于检测代码中的错误、漏洞并确保代码规范。它可以与现有的工作流集成,以实现跨项目和拉取请求分支的代码检查,并支持Java、Python、PHP、JavaScript、CSS等25种以上的语言。SonarQube能够集成在IDE、Jenkins、Git等服务中,方便随时查看代码质量分析报告。SonarQube的核心价值有以下几点_mend io 扫描前端项目

显卡+cuda+cudnn+tensorflow安装教程_intel graphics 630能够装conda-程序员宅基地

文章浏览阅读1.5k次。文章目录1. 先修知识1.1 显卡1.2 显卡驱动1.3 Cuda1.4 Cudnn1.5 GPU1.6 **Nouveau**1.7 **GCC是GNU编译器套件**2. 检查本地配置3.NVIDIA显卡驱动安装3.1 官网下载run文件3.2 用指令查看版本3.3 删除旧的显卡驱动3.4 禁止自带的nouveau nvidia驱动3.5 修改bios设置3.6 安装驱动3.7 安装结束后重启电脑,再查看是否安装成功3.8 重新打开桌面3.9 或使用PPA仓库自动化安装**4. 安装CUDA****_intel graphics 630能够装conda

Spring源码之@Import注解解析_@import spring 问题-程序员宅基地

文章浏览阅读376次。Spring中@Import注解以及源码对@Import的解析_@import spring 问题

1497 取余运算-程序员宅基地

文章浏览阅读122次。1497 取余运算时间限制: 1 s空间限制: 128000 KB题目等级 : 钻石 Diamond题解查看运行结果题目描述Description输入b,p,k的值,编程计算bpmodk的值。其中的b,p,k*k为长整型数(2^31范围内)。输入描..._jmeter 取余

phpmyadmin大数据导入问题_phpmyadmin 导入数据较大时,出现apache http server 已停止工作-程序员宅基地

文章浏览阅读435次。使用phpmyadmin数据库导入出错:You probably tried to upload too large file!解决方法The first things to check (or ask your host provider to check) are the values ofupload_max_filesize,memory_limit and post_max__phpmyadmin 导入数据较大时,出现apache http server 已停止工作

GoogleMap(通过输入地址,查询显示在google 地图上)-程序员宅基地

文章浏览阅读268次。主Activity:[code="java"]package net.blogjava.mobile.map;import java.util.List;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import ..._google maps 根据输入地址,返回对应的地址组

随便推点

〖Python 数据库开发实战 - MongoDB篇①〗- MongoDB数据库简介_〖python 数据库开发实战 - mongodb篇 〗- mongodb数据的导入导出-程序员宅基地

文章浏览阅读3.6w次,点赞24次,收藏15次。接下来的一段时间我们将要学习一下 MongoDB 数据库的内容,首先要了解 MongoDB 数据库的背景知识,比如与其他 NoSQL数据库 的区别。接下来就是安装 MongoDB 数据库 与 Robot3T 客户端 ,这样就可以操作 MongoDB 了。需要注意的是 MongoDB 数据库并没有提供类似 Redis 那样的指令,也没有 MySQL 那样的 SQL 语法,操作 MongoDB 的是 JavaScript 的代码,利用 JavaScript 语句操作 MongoDB 数据库。还有一点就是,_〖python 数据库开发实战 - mongodb篇 〗- mongodb数据的导入导出

[Vuejs+php] MySQL数据转JSON传值到前端-程序员宅基地

文章浏览阅读224次。说在前面JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。优点如下[转]:1.占带宽小(格式是压缩的)2.js通过eval()进行Json读取(便于客户端读取)3. JSON支持多种语言(c、c++、PHP等),便于服务端解析关键代码json_encode( $arr )  <文档传送门>ajax   ..._vue sql语句转json

GPS开发、定位修改_virtualposition-程序员宅基地

文章浏览阅读7.4k次。GPS开发、定位修改修改于AOSPandroid7.1.1_r1NMF26Fopenjdk8.0Mint-linuxnexus5x原作者:https://blog.csdn.net/aggresss/article/details/54323034指出文中错误(自己编译时候遇到的)并修正固件共享出来是不可能的,谁知道我的固件里有没有后门,还是用源码自己编译的比较放心新鲜的源码..._virtualposition

Ionic 创建自定义模块(module)_ionicmodule-程序员宅基地

文章浏览阅读903次。在Angular中组件和组件之间可以实现通信,而在 Ionic中每个page是一个模块,而模块里面的组件和其他 page 模块中的组件是无法直接通信的,此时就可以使用自定义模块间接的实现模块之间的通信,类似ng中的模块配置过程,把需要把 page(模块module)暴露出来给其他外部page(模块module)使用,实现步骤如【ionic自定义模块】所示。..._ionicmodule

Java从入门到入坟_Day01_java 从入门到入坟-程序员宅基地

文章浏览阅读263次。个人Java学习请求 —— 协议—— ip—— 端口号—— 资源路径端口号:运行时端口号才回被占用,未运行时端口号可以被其他使用是约束浏览器和服务的请求与响应,是特定数据交互格式,是一个超文本传输协议。作用:写一个美观的呈现程序且能交互的页面,html:书写静态的页面css:美化页面js:让页面能进行交互作用:给前端提供数据的,Java编程:让计算机帮人做事情程序:计算机能识别的是二进制,开发者不能使用二进制开发,使用字母,汉字,标点符号组成的高级语言进行编写虚拟机:Jvm将编写好的代码转换为计算机能看懂的_java 从入门到入坟

React生命周期详解-程序员宅基地

文章浏览阅读1.1w次,点赞3次,收藏31次。整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析_react生命周期

推荐文章

热门文章

相关标签