当前位置:首页 > 服务端 > 页面http请求的几种方式

页面http请求的几种方式

2022年09月17日 20:58:49服务端7

目录:

1.jQuery中的ajax请求:

$.post(url,data,fn,type)

$.get(url,data,fn,type)

2.form提交的方式,可以发起请求,采用$(’#myform’).submit(),的方式发起请求,可以在form的method中设置get还是post

3.window.open(URL,name,specs,replace),打开新页面,不刷新当前页面。默认是get请求。

4.window.location.href(url),重新定向到新页面,并刷新打开的页面。默认是get请求。

详细解释上面的请求

1. jQuery中的ajax请求: . p o s t ( u r l , d a t a , f n , t y p e ) ; .post(url,data,fn,type) ; .post(url,data,fn,type);.get(url,data,fn)

1.0 post请求

参数:
[post和get请求的参数
url 请求地址
data 发送的数据参数
fn 发送成功后的回调函数
type 返回数据的类型。可以是:string或者json类型]

实例:
$.post(
     'url',
     {key:value,keyOne:valueOne},
    function(data){
        // 这里是请求发送成功后的回调函数。
        // data是返回的数据,数据类型在type参数里定义!
    },
    // 默认返回字符串,设置值等于json则返回json数据
    type:'json',
)

1.2 get请求

参数:
url 请求地址
data 发送的数据参数
fn 发送成功后的回调函数
type 返回数据的类型。可以是:string或者json类型
实例:
$.get(
      'url',
     {key:value,keyOne:valueOne},
    function(data){
        // 这里是请求发送成功后的回调函数。
        // data是返回的数据,数据类型在type参数里定义!
    },
    // 默认返回字符串,设置值等于json则返回json数据
    type:'json',
)

1.3 $.ajax请求

实例:
$.ajax({
    type: "POST",// 请求方式GET POST 等等
    url: 'url',// 请求url地址
    data:  {key:value,keyOne:valueOne},
    dataType: "json",// 数据返回类型xml,html,script,json,jsonp,text
     processData: false,//  告诉jQuery不要去处理发送的数据
   contentType:"application/json;charset=utf-8",//String类型的参数,false: 告诉jQuery不要去设置Content-Type请求头
   cache:true,//默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息
    success: function(data){
        // 请求发送成功后执行的函数,data是返回的数据。
    },
    timeout: 3000,// 超时设置,如果3秒内请求无响应,则执行error定义的方法
    error: function(){
        // code
    },
    async:true //默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false
})

2.form提交的方式

2.0 表单提交方式一:直接利用form表单提交

<form action="url" method="post">

	用户名:<input type="text" name="username" /><br>
	
	密码:<input type="password" name="password" /> <br>
	
	<input type="submit" value="登录">

</form>
//上传附件时,需要设定form的enctype="multipart/form-data"并且添加

2.1 表单提交方式二:使用ajax提交

<form  method="post" onsubmit="return false" action="##" id="myForm">

	用户名:<input type="text" name="username" /><br>
	
	密码:<input type="password" name="password" /> <br>
	
	<input type="button" value="登录" onclick="login()">

</form>

$.ajax({
    type: "POST",// 请求方式GET POST 等等
    url: 'url',// 请求url地址
    data: new FormData($("#myForm")[0]),
    dataType: "json",// 数据返回类型xml,html,script,json,jsonp,text
     processData: false,//  告诉jQuery不要去处理发送的数据
   contentType:"application/json;charset=utf-8",//String类型的参数,false: 告诉jQuery不要去设置Content-Type请求头
   cache:true,//默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息
    success: function(data){
        // 请求发送成功后执行的函数,data是返回的数据。
    },
    timeout: 3000,// 超时设置,如果3秒内请求无响应,则执行error定义的方法
    error: function(){
        // code
    },
    async:true //默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false
})

2.3 表单提交方式三:使用easyui的form插件提交

function login() {
   $("#myForm").form("submit",{
	   url:"url",
	   success:function (data){
	
	   }
	   
   })

3.window.open(URL,name,specs,replace)

参数:
URL	:可选。打开指定的页面的URL。如果没有指定URL,打开与新的空白窗口
name:	可选。指定target属性或窗口的名称。支持以下值:
			_blank       - URL加载到一个新的窗口。这是默认
			_parent       - URL加载到父框架
			_self           - URL替换当前页面
			_top           - URL替换任何可加载的框架集
			name          - 窗口名称
specs:   height=pixels	窗口的高度。最小.值为100
			left=pixels	该窗口的左侧位置
			location=yes|no|1|0	是否显示地址字段.默认值是yes
			menubar=yes|no|1|0	是否显示菜单栏.默认值是yes
			resizable=yes|no|1|0	是否可调整窗口大小.默认值是yes
			scrollbars=yes|no|1|0	是否显示滚动条.默认值是yes
			status=yes|no|1|0	是否要添加一个状态栏.默认值是yes
replace:	Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当									  前条目。  支持下面的值:
			true - URL 替换浏览历史中的当前条目。
			false - URL 在浏览历史中创建新的条目。

4.window.location.href(url)

javascript中的location.href有很多种用法,主要如下。

self.location.href="/url" 当前页面打开URL页面
location.href="/url" 当前页面打开URL页面
windows.location.href="/url" 当前页面打开URL页面,前面三个用法相同。
this.location.href="/url" 当前页面打开URL页面
parent.location.href="/url" 在父页面打开新页面
top.location.href="/url" 在顶层页面打开新页面
window.location.href=window.location.href;和window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据

5.其他

window对象的其他属性:

window.close();关闭当前窗口

setTimeout():延迟一段时间,执行一次
setTimeout(function () {
//编辑代码
}, 1000);  //延迟1s,执行里面的函数一次

setInterval():延迟一段时间,循环执行
var time = setInterval(function () {

 }, 1000);
 
HTML DOM的document也是window对象的属性之一:window.document.getElementById(“header”);
与document.getElementById(“header”);相同

document.documentElement.clientWidth;  //获取浏览器可视区域的宽,调试器不算
document.documentElement.clientHeight;  //获取可视区域的高,调试器不算

window.open(URL,窗口名称,窗口风格) //打开一个新的窗口,并在窗口中装载指定URL地址的网页。
window.close() //close方法用于自动关闭浏览器窗口。
window.alert(提示字符串)//弹出一个警告框,在警告框内显示提示字符串文本。
window.confirm(提示字符串)//显示一个确认框,在确认框内显示提示字符串,当用户单击“确定”按钮
window.prompt(提示字符串,缺省文本)//显示一个输入框,在输入框内显示提示字符串,在输入文本框显示缺省文
window.setTimeout(代码字符表达式,毫秒数)//定时设置,当到了指定的毫秒数后,自动执行代码字符表达式
window.clearTimeout(定时器)//取消以前的定时设置,其中的参数是用setTimeout设置时的返回值。
window.setInterval(代码字符表达式,毫秒数)//设定一个时间间隔后(第二个参数),反复执行“代码字符表达式”的内容
window.clearInterval(时间间隔器)//取消setInterval设置的定时。其中的参数是setInterval方法的返回值。
window.moveBy(水平位移量,垂直位移量)//按照给定像素参数移动指定窗口。第一个参数是窗口水平移动的像素,第
二个参数是窗口垂直移动的像素。
window.moveTo(x,y)//将窗口移动到指定的指定坐标(x,y)处。
window.resizeBy(水平,垂直)//将当前窗口改变指定的大小(x,y),当x、y的值大于0时为扩大,小于0时
window.resizeTo(水平宽度,垂直宽度)//将当前窗口改变成(x,y)大小,x、y分别为宽度和高度。
window.blur()//从窗口中移出焦点。当与focus方法合用时必须小心,因为可能导致焦点
window.focus()//使窗口中得到焦点。当与blur方法合用时必须小心,因为可能导致焦点不断移进移出。

作者:几痴~
来源链接:https://blog.csdn.net/weixin_45245297/article/details/120071307

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/server/42889.html

标签: HTTP
分享给朋友:

“页面http请求的几种方式” 的相关文章

android studio 第一个程序显示radle d 'https://services.gradle.org/distributions/gradle

android studio 第一个程序显示radle d 'https://services.gradle.org/distributions/gradle

复制链接下载https://services.gradle.org/distributions/gradle-5.4.1-all.zip 并复制到C盘 C:\Users\luckly.gradle\wrapper\dists\gradle-5.4.1-a...

项目ITP(四) javaweb http json 交互 in action (服务端 spring 手机端 提供各种工具类)勿喷!

项目ITP(四) javaweb http json 交互 in action (服务端 spring 手机端 提供各种工具类)勿喷!

前言   系列文章:[传送门]   洗了个澡,准备写篇博客。然后看书了。时间 3 7 分。我慢慢规律生活,向目标靠近。                       &n...

通过java.net.URLConnection发送HTTP请求的方法

通过java.net.URLConnection发送HTTP请求的方法

如何通过Java发送HTTP请求,通俗点讲,如何通过Java(模拟浏览器)发送HTTP请求。 Java有原生的API可用于发送HTTP请求,即java.net.URL、java.net.URLConnection,这些API很好用、很常用,但不够简便; 所以,也流行有许多J...

IDEA自带HTTP请求

IDEA自带HTTP请求

平时测试请求用的最多的工具就是postman,用了那么久的IDEA才知道,IDEA自带有restful  server,可以直接在IDEA上模拟请求。 1.操纵步骤:Tools->Test RestFul Web Service  2...

git clone使用https

git clone使用https

git默认开启SSL验证, 如果直接使用git clone https://xxx, 会返回SSL certificate problem: unable to get local issuer certificate, 需要把SSL验证关闭,...

SpringBoot系列——启用https

SpringBoot系列——启用https

  前言   有时候我们需要使用https安全协议,本文记录在SpringBoot项目启用https     生成证书   自签名证书   使用java jdk自带的生成SSL证书的工具keytool生成自己的证书   1、打开cmd...

通过idea发送HTTP请求

通过idea发送HTTP请求

通过idea发送HTTP请求 我们测试自己写的接口时候经常会用到postman等工具构造请求,来检验接口是否正确,postman很方便,但是idea也自带了这种功能 打开后是这样子: 这里能看到返回结果: 也可以这种形式,点击这里...

java项目常用工具类之http请求工具类

jdk1.8+spring4.3.12 一、问题描述及试用场景: 在项目开发中,经常用调用http接口,下面是封装apache的httpclient工具类。 二、样例代码: package org.egg.utils; im...

HttpRequest,HTTP的请求利器

项目地址: https://github.com/kevinsawicki/http-request 1、发送一个get请求,获取响应码,够方便了吧。int code = HttpRequest.get("http://google.com").code();2、加个请求参数呢?...

前端一次同时发送多个http请求,模拟后端并发

前端一次同时发送多个http请求,模拟后端并发

前端可以做并发吗 答案是:理论上可以,实际操作可能会有点差强人意。javascript没有多线程这样一个说法,其次,不建议使用这种方式解决问题,多线程应该交给后台去做 首先我们会想到第一个很实际的方式采用 setInterval(function)...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。