AJAX get和post请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/login.css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--==============================方法1：使用form表单提交-->
<!--<form action="/ashx/Login.ashx" method="post">
<div class="login">
<div class="content clearfix">
<div class="content-left">
<div class="logo">
<img src="data:images/logo.png" alt="" />
<p>河北农业大学就业管理系统</p>
</div>
</div>
<div class="shu"></div>
<div class="content-right">
<div class="login-form">
<h2>用户登录/LOGIN</h2>
<div class="identifire">
<span>身 份：</span>
<select id="Role" name="Role">
<option value="学生" selected="selected">学生</option>
<option value="教师教辅人员">教师教辅人员</option>
</select>
</div>
<div class="account clearfix">
<span>账 号：</span>
<input type="text" value="" id="usAccount" name="usAccount"/>
</div>
<div class="password clearfix">
<span>密 码：</span>
<input type="text" value="" id="usPwd" name="usPwd"/>
</div>
<div class="code clearfix">
<span>验证码：</span>
<input type="text" value="" />
<em></em>
</div>
<div class="btn">
<input id="button" type="submit" value="提交"/>//submit以表单的方式提交数据
<span class="forget"><a href="password.html">忘记密码</a></span>
</div>
</div>
</div>
</div>
</div>
</form>-->
<!--方法2：直接通过jquery前端校验==============================================================-->
<form>
<div class="login">
<div class="content clearfix">
<div class="content-left">
<div class="logo">
<img src="data:images/logo.png" alt="" />
<p>河北农业大学就业管理系统</p>
</div>
</div>
<div class="shu"></div>
<div class="content-right">
<div class="login-form">
<h2>用户登录/LOGIN</h2>
<div class="identifire">
<span>身 份：</span>
<select id="role" name="role">
<option value="1" selected="selected">管理员</option>
<option value="2">教师</option>
<option value="3">学生</option>
<option value="4">超级管理员</option>
</select>
</div>
<div class="account clearfix">
<span>账 号：</span>
<input type="text" value="" id="usAccount" name="usAccount" />
</div>
<div class="password clearfix">
<span>密 码：</span>
<input type="text" value="" id="usPwd" name="usPwd" />
</div>
<div class="code clearfix">
<span>验证码：</span>
<input type="text" value="" />
<em></em>
</div>
<div class="btn">
<span id="login"><a>登录</a></span>
<span class="forget"><a href="password.html">忘记密码</a></span>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
//在前端使用jquery获取表单数据
//$(function (){
//$("#login").on("click","a",function () {
//var d = {};
//var data = $("form").serializeArray();//可以获取表单中的所有数据
//$.each(data, function () {
//d[this.name] = this.value;
//});
//console.log(JSON.stringify(d));//返回的是json串
// });
//});
//==================================================================================
//$(document).ready(function () {
// $('#login').on('click', 'a', function () {
// var aVal = $('.identifire select');
// if (aVal.val() == '学生') {
// $(this).attr('href', 'StudentIndex.html');
// } else if (aVal.val() == '教师教辅人员') {
// $(this).attr('href', 'TeacherIndex.html');
// }
// });
//});
//jquery使用ajax请求5步操作：get请求
//$(function (){
// $("#login").on("click","a",function (){
// //1、创建异步对象
// var ajaxObj = new XMLHttpRequest();
// var url = "/ashx/Login.ashx?usAccount=" + $("#usAccount").val() + "&usPwd=" + $("#usPwd").val();
// //2、设置请求参数：
// ajaxObj.open("get",url,true);
// //3、发送求情
// ajaxObj.send();
// //4、注册事件
// ajaxObj.onreadystatechange = function(){
// if (ajaxObj.status == 200 && ajaxObj.readyState==4){
// alert("返回成功！");
// console.log(ajaxObj.responseText);
// }
// }
// });
//});
//jquery使用ajax请求5步操作：post请求
// $(function () {
// $("#login").on("click", "a", function () {
// //1、创建异步对象
// var ajaxObj = new XMLHttpRequest();
// //2、设置请求参数：
//ajaxObj.open("post", "/ashx/Login.ashx", true);
//ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// //3、发送求情
//ajaxObj.send("usAccount=" + $("#usAccount").val() + " &usPwd=" + $("#usPwd").val());
// //4、注册事件
// ajaxObj.onreadystatechange = function () {
// if (ajaxObj.status == 200 && ajaxObj.readyState == 4) {
// alert("返回成功！");
// console.log(ajaxObj.responseText);
// }
// }
// });
// });
//$(function () {
// $("#login").on("click", "a", function () {
// var name = $("#usAccount").val();
// if (name == "") {
// alert("请输入账号！");
// return false;
// }
// else {
// //async: true 异步请求 get
// //checkName(name);
// //async: true 异步请求 post
// //checkName(name);
// //async: true 同步请求 get
// checkName(name);
// return true;
// }
// });
//});
//function checkName(name) {
// //ajax异步请求五步操作
// var ajaxObj = new XMLHttpRequest();
// ajaxObj.open("post", "/ashx/Login.ashx?name="+name, true);
// ajaxObj.send();
// ajaxObj.onreadystatechange=function(){
// if (ajaxObj.status == 200 && ajaxObj.readyState==4) {
// alert(ajaxObj.responseText);
// }
// }
//}
//同步get请求
//function checkName(name) {
// var ajaxObj = new XMLHttpRequest();
// ajaxObj.open("get", "/ashx/Login.ashx?name=" + name, false);
// ajaxObj.send();
// alert(ajaxObj.responseText);
//}
//同步post请求
//function checkName(name) {
// var ajaxObj = new XMLHttpRequest();
// ajaxObj.open("post", "/ashx/Login.ashx?name=" + name, false);
// ajaxObj.send();
// alert(ajaxObj.responseText);
//}
//登录验证
$(function () {
$("#login").on("click", "a", function () {
var xhr = new XMLHttpRequest();
xhr.open("post", "/ashx/Login.ashx", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("usAccount=" + $("#usAccount").val() + "&usPwd=" + $("#usPwd").val() + "&role=" + $("#role").val());
xhr.onreadystatechange = function () {
if (xhr.status == 200 && xhr.readyState == 4) {
window.location = "../html/StudentInfo.html";
}
}
});
});
</script>
</body>
</html>
AJAX get和post请求的更多相关文章
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- Ajax与ashx异步请求的简单案例
Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- ajax防止重复提交请求1
ajax防止重复提交请求 A. 独占型提交 只允许同时存在一次提交操作,并且直到本次提交完成才能进行下一次提交. module.submit = function() { if (this.pro ...
- ajax是怎么发请求的和浏览器发的请求一样吗？cookie
下午设置cookie时出现了个问题 用ajax发的post请求php,在php的方法里设置了cookie,然后在浏览器请求的php里打印cookie值但是一直获取不到cookie的值 分析: 1.aj ...
- ajax学习之post请求步骤
ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...
- 原生 JS Ajax,GET和POST 请求实例代码
javascript/js的ajax的GET请求代码如下所示: <script type="text/javascript"> /* 创建 XMLHttpRequest ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- Ajax之跨域请求
一.引子 我现在开启了两个django项目,分别叫Demo1和Demo2,Demo1中有一个路径‘http://127.0.0.1:8000/index/’,对应的视图是index视图返回一个inde ...
- 使用AJAX技术发送异步请求，HTTP服务端推送
使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于X ...
- ajax用beforeSend自定义请求过程中客户端事件，提高用户体验
本文为博主原创,未经允许不得转载: 在应用ajax的过程中,当我们再前台提交请求的时候,如果服务端响应事件比较长,就会导致需要等很长时间在前台才能接受到服务端返回的 响应结果,往往会导致用户重复点击按 ...
随机推荐
- 【Tool】IntelliJ IDEA 使用技巧
IntelliJ IDEA 使用技巧 2019-11-06 20:51:43 by冲冲 1.快捷键 Ctrl+w //括出相关范围 Ctrl+shift+f //按照代码段在全局搜索 Ctrl+f ...
- 由于vue的for循环id并不严谨，提高id严谨性
如果后台没有传入id,我们拿到的数据没有id修改等操作不方便,如何拿到id呢 https://github.com/dylang/shortid 提供唯一id 插件的引入和使用: <templa ...
- vue文件引入
<template> <div class="hello"> <h1>{{ msg }}</h1> <!-- <h1&g ...
- Codeforces 1511G - Chips on a Board（01trie/倍增）
Codeforces 题面传送门 & 洛谷题面传送门 一道名副其实的 hot tea 首先显然可以发现这俩人在玩 Nim 游戏,因此对于一个 \(c_i\in[l,r]\) 其 SG 值就是 ...
- Codeforces 446D - DZY Loves Games（高斯消元+期望 DP+矩阵快速幂）
Codeforces 题目传送门 & 洛谷题目传送门 神仙题,%%% 首先考虑所有格子都是陷阱格的情况,那显然就是一个矩阵快速幂,具体来说,设 \(f_{i,j}\) 表示走了 \(i\) 步 ...
- Python基础之变量与常量
目录 1. 变量 1.1 变量的定义和组成 1.2 变量名的命名规则 1.3 变量名的两种风格 2. 常量 3. 变量内存管理 3.1 变量的存储 3.2 垃圾回收机制 3.2.1 引用计数 3.3 ...
- X-MagicBox-820的luatOS之路连载系列6
继上次用Qt实现了显示地图和MQTT通信之后(X-MagicBox-820的luatOS之路连载系列5),说是要研究下地图的开放接口,也看了标记点和线的方法(地图上自定义标记点和轨迹线的实现).这次就 ...
- NuxtJS的AsyncData和Fetch使用详解
asyncData 简介 asyncData 可以用来在客户端加载 Data 数据之前对其做一些处理,也可以在此发起异步请求,提前设置数据,这样在客户端加载页面的时候,就会直接加载提前渲染好并带有数据 ...
- Mysql百万级数据索引重新排序
参考https://blog.csdn.net/pengshuai007/article/details/86021689中思路解决自增id重排 方式一 alter table `table_name ...
- vue-cli4脚手架搭建二
vue-cli4脚手架搭建一 vue create vue3 cd vue3 yarn serve http://localhost:8080/#/ main.js文件 import Vue from ...