提交请求最基础的4种方式以及可以发送请求的7个位置
提交请求最基础的4种方式
一、可以使用jquery发送ajax请求
1.使用全ajax方式发送
请求实例
var url = "/test/check";
$.ajax({
type: "post",
url: url,
// data: "para="+para, 此处data可以为 a=1&b=2类型的字符串 或 json数据。
data: {"para":1},
cache: false,
async : false,
dataType: "json",
success: function (data ,textStatus, jqXHR)
{
if("true"==data.flag){
alert("合法!");
return true;
}else{
alert("不合法!错误信息如下:"+data.errorMsg);
return false;
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert("请求失败!");
}
});
参数
该参数规定 AJAX 请求的一个或多个名称/值对。
下面的表格中列出了可能的名称/值:
- async 布尔值,表示请求是否异步处理。默认是 true。
- beforeSend(xhr) 发送请求前运行的函数。
- cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。
- complete(xhr,status) 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
- contentType 发送数据到服务器时所使用的内容类型。默认是:“application/x-www-form-urlencoded”。
- context 为所有 AJAX 相关的回调函数规定 “this” 值。
- data 规定要发送到服务器的数据。
- dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
- dataType 预期的服务器响应的数据类型。
- error(xhr,status,error) 如果请求失败要运行的函数。
- global 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
- ifModified 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
- jsonp 在一个 jsonp 中重写回调函数的字符串。
- jsonpCallback 在一个 jsonp 中规定回调函数的名称。
- password 规定在 HTTP 访问认证请求中使用的密码。
- processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
- scriptCharset 规定请求的字符集。
- success(result,status,xhr) 当请求成功时运行的函数。
- timeout 设置本地的请求超时时间(以毫秒计)。
- traditional 布尔值,规定是否使用参数序列化的传统样式。
- type 规定请求的类型(GET 或 POST)。
- url 规定发送请求的 URL。默认是当前页面。
- username 规定在 HTTP 访问认证请求中使用的用户名。
- xhr 用于创建 XMLHttpRequest 对象的函数。
2.使用简易的方式
/****精简的版*********/
$.get("servlet/Dome3",{name:'zs',age:19},function(msg){
alert(msg);
});
$("#bu").click(function(){
//zh1=123&zh2=345&zh3=456&zh4=678&zh5=789
var val=$("#fom").serialize();
alert(val);
$.post("servlet/Dome3",val,function(msg){
alert(msg);
});
});
});
3.跨域请求(只是简单的jQuery)
跨域
$.ajax({
type:"get",
url:"jsonp.php",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"success_callback",
success:function(data){
$("#word").html(data.name);
}, error:function(err){
console.log(err);
}
});
二、form表单提交的方式(使用的比较普遍)
from表单把所有属于表单中的内容提交给后台,例如输入框,单选框,多选框,文本域,文件域等。
- 在后台可通过对应的name属性获取相应的值。
- from表单中的action属性标识提交数据的地址。
- method属性指明表单提交的方式。
<form action="demo.do" method="post">
用户名:<br>
<input type="text" name="username"><br>
密码:<br>
<input type="password" name="password" ><br><br>
<input type="submit" value="提交">
</form>
注意: 以上两种方式(ajax和form表单)如果不显示的指定post提交方式,则默认的提交方式为get方式提交
三、直接发送请求(在前端JavaScript函数中)
window.location.assign("www.baidu.com");<会产生历史纪录>
window.location.href="www.baidu.com";<会产生历史纪录>
window.location.replace="www.baidu.com";<不会产生历史纪录>
四、在后台中也可以互相访问相应的Servlet
在其中一个servlet中设置请求参数,请求转发到一个JSP(相当于一个servlet)
request.setAttribute("id","3");
request.setAttribute("gender","男");
request.getRequestDispatcher("updateUser.jsp").forward(request,response);
在其他的servlet中接收参数,进行相应的处理
String id = request.getAttribute("id");
String gender = request.getAttribute("gender");
可以发送请求的7个位置
1、 link标签的href属性
2、 script标签的src属性
3、 img标签的src属性
4、 ajax发送请求
5、 表单提交发送请求
6、 a标签的href发送请求
7、 iframe的src属性发送请求
新增:(后续补充)
- fetch
- XMLHttpRequest
- axios