简单的jquery Ajax进行登录！
本案例包括login.html、login.php、jquery-1.12.0.min.js三个文件，只需将这三个文件放到同一文件夹下，即可运行。
login.html：
<!DOCTYPE html>
<html>
<head>
<title>jquery Ajax!</title>
<meta charset="utf-8">
</head>
<body>
<input name="username" type="text" placeholder="请输入用户名" value="meizi">
<input name="password" type="text" placeholder="请输入密码" value="123456">
<!-- 在login.php中默认设置用户名为：meizi，密码为：123456 -->
<p></p>
<input name="submit" type="submit" onclick="login()">
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
function login(){
var username = $("input[name='username']").eq(0).val();
var password = $("input[name='password']").eq(0).val();
console.log(username + '-' + password);//方便大家查看效果，这个log我就不删除了
$.ajax({
type : "post",
url : "login.php?"+Math.random(),
data : {"username": username,"password": password},
async : true,
success: function(msg){
console.log(msg);//方便大家查看效果，这个log我就不删除了
$("p").eq(0).html(msg.msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("p").eq(0).html("连接超时！");//Ajax出错的情况下，才会出现此错误！
}
});
};
</script>
</body>
</html>
login.php：
<?php
//声明json格式与编码格式
header('Content-Type:text/json;charset=utf-8');
//1 传入用户名和密码
$username = $_POST['username'];
$password = $_POST['password'];
//2 默认设置用户名为：meizi，密码为：123456，进行账号密码验证
if($username==="meizi" && $password==="123456"){
//建立数组，并将数组转化为json格式，作为ajax的返回值，返回给login.html
//用户名和密码验证成功，返回值如下
$test = array("msg"=>"登陆成功！","username"=>$username,"password"=>$password);
//事实上，若要进行数据库登录验证，只需在此处连接数据库，然后进行sql查询即可，但是本案例只演示jquery的Ajax，就不再涉及数据库了
echo json_encode($test);
}else{
//用户名和密码验证失败，返回值如下
$test = array("msg"=>"用户名或密码错误，请重新输入！","username"=>$username,"password"=>$password);
echo json_encode($test);
}
jquery-1.12.0.min.js见链接：https://files.cnblogs.com/files/chenyoumei/jquery-1.12.0.min.js
简单的jquery Ajax进行登录！的更多相关文章
- 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）
使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...
- 简单的jquery ajax文件上传功能
/* * 图片上传 * 注意如果不加processData:false和contentType:false会报错 */ function uploadImage(image) { var imageF ...
- 一个简单的jquery ajax表单提交 带数据校验 layer弹框提示
<input type="hidden" id="url" value="index.php"/> <form id=&q ...
- jquery ajax常用的登录登出
整理jquery+ajax的登录登出方法. //登录 var currentUserId = -1; $(function() { var timestamp = (new Date()).value ...
- Jquery Ajax处理，服务端三种页面aspx,ashx,asmx的比较
常规的Jquery Ajax 验证登录,主要有3种服务端页面相应 ,也就是 aspx,ashx,asmx即webserivice . 下面分别用3种方式来(aspx,ashx,asmx)做服务端来处理 ...
- jquery ajax return值不能取得的解决方案
jQuery ajax - ajax() 方法 http://www.w3school.com.cn/jquery/ajax_ajax.asp http://www.cnblogs.com/fqw19 ...
- jquery ajax 不执行赋值，return没有返回值的解决方法
大家先看一段简单的jquery ajax 返回值的js 复制代码 代码如下: function getReturnAjax{ $.ajax({ type:"POST", url:& ...
- jquery ajax 同步异步的执行
jquery ajax 同步异步的执行 大家先看一段简单的jquery ajax 返回值的js 代码 function getReturnAjax{ $.ajax({ type:" ...
- Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
随机推荐
- jsp中 EL表达式 ${}
原文位置:https://zhidao.baidu.com/question/711232806155434565.html jsp标签中的 ${表达式}用来输出或者计算一个表达式的内容,比如${3+ ...
- 根下var目录迁移
问题 var目录挂载在根目录下,占用/分区的空间,如果/var/log日志空间过大,将导致/分区空间满,导致系统无法使用. 解决方案 在硬盘上划分单独的分区,挂载到/var目录,并迁移/var目录下的 ...
- js基础心得
最近有想法研究jQuery源码,一顿查阅顿感自己基础薄弱.手中正好有一本js高程,遂决定深入js基础,并记录心得至博客园.以待一举攻克jQuery,VUE等源码. 1,变量.作用域和内存问题 2,引用 ...
- mvc 模板位置
mvc4 模板位置 Common7\IDE\ItemTemplates\CSharp\Web\MVC 4\CodeTemplates mvc5 模板位置 Common7\IDE\Extensions\ ...
- 第三十九篇 入门机器学习——Numpy.array的基础操作——合并与分割向量和矩阵
No.1. 初始化状态 No.2. 合并多个向量为一个向量 No.3. 合并多个矩阵为一个矩阵 No.4. 借助vstack和hstack实现矩阵与向量的快速合并.或多个矩阵快速合并 No.5. 分割 ...
- 1.4 面试问题整理: ATM机取款
流程图:
- 数位dp（Balanced Numbers ）
题意:一个数,如果满足奇数的数字出现偶数次,偶数的数字出现奇数次, 就是符合的数,注比如:12313 就满足,因为1 3出现了偶数次.2出现了奇数次 思路,对于这道题,就是状态压缩加dp: 对于一个 ...
- MySQL数据库 | 数据表-查询命令详细记录
本篇专门记录数据库增删改查中最常用.花招最多的 查. [文章结构] 一.数据的准备 二.基本的查询功能 三.条件查询 四.查询排序 五.聚合函数 六.分组查询 七.分页查询 八.连接查询 九.子查询 ...
- 创建集群corosync
#环境准备 #设置主机名解析yum -y install pcs pacemaker corosync fence-agents-allsystemctl start pcsd.servicesyst ...
- DOM的方法和属性
HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作. HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值. 编程接口 可通过 JavaScript (以及其他编程 ...