前端页面发送请求

发送请求, 通常有 ①使用 form 表单快速提交, ②使用 ajax 提交

使用 form 表单提交

其中 action 表示发送的 url , method 表示发送的方式, 发送数据时,

<form action="xxxServlet" method="post">
   xxx代码
</form>

使用此方式提交时, 通常需要注意的有:

• 使用 onblur 属性检测每个 input 的输入是否正确
• 使用 form 的 onsubmit 检测整个表单
• 使用 input 的 name 属性, 否则无法提交数据

当你需要使用 post，限定不能再增加 input，此时可以用以下方法

<form action=“loginServlet?t=123456” method=“post”>
   xxx内容
</form>

这个方式是在 post 请求中，把请求url写成一个显示的get请求并赋予参数，这里称为 post 隐藏传参

这种方式在后端仍监听 post，而t参数也被包含在请求参数中。

使用ajax提交请求

使用 ajax 发送请求时, 不会更新整个页面, 只会局部更新, 非常方便, 下面仅展示 jquery 下的 ajax 提交

jquery 实现的 ajax 更简单，方便，有 3 种实现写法。

( 下载 jquery 源文件，点击这里 )

$.ajax 方式

发送的数据通常使用 json 格式，可以一次发送多对值

（实际参数比列出的要多，这里只列出了常用参数）

$.ajax({
	url:"ajaxServlet1111" , // 请求路径
	type:"POST" , //请求方式
	//data: "username=jack&age=23",//请求参数
	data:{"username":"jack","age":23},
 
	success:function (data) {
		alert(data);
	},//响应成功后的回调函数
	error:function () {
		alert("出错啦...")
	},//表示如果请求响应出现错误，会执行的回调函数

	dataType:"text"//设置接受到的响应数据的格式
});

$.get 方式

只能发送 get 请求，比 $.ajax 方式更简单

//只有 4 个参数，①url，②数据，③响应回调函数，④响应数据格式

$.get("ajaxServlet",{username:"rose"},function (data) {
    alert(data);
},"text");

$.post 方式

只能发送 post 请求，比 $.ajax 方式更简单

//只有 4 个参数，①url，②数据，③响应回调函数，④响应数据格式

$.post("ajaxServlet",{username:"rose"},function (data) {
    alert(data);
},"text");

响应数据格式可以省略，浏览器会自动根据响应的 MIME 类型判断

选择那种请求方式?

对用户的操作, 常用异步请求, 如果使用表单提交, 那么仅能校验格式, 而无法校验数据库,

而表单提交后, 必定会跳转页面, 一旦无法登录, 你不得不重定向回来继续输入!!!

通常在表单中使用ajax

//checkAll绑定表单的submit方法,不写action和method
//当表达提交时，调用所有的校验方法
function checkall(){
	// 1.发送数据到服务器
	if(nameflag&&checkPassWord()&&checkRePassWord()&&checkEmail()&&checkCode2()){
		//ajax异步请求
		// alert("校验通过")
		$.post("registUserServlet",{username:$("#username").val(),
			password:$("#pwd").val(),email:$("#email").val()},
				function(msg){
				//刷新验证码，下次注册必须重新输入
					changeCode();
					if(msg!="注册成功"){
						alert( "提示: " + msg);
					}else {
						//注册成功
					}

				},"text");
	//注册成功, 直接重定向
					location.href="register_ok.html";
	};
	//2.注册不成功,表单提交不通过
	return false;
}