简单的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等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
随机推荐
- 随机数模块random_python
一.随机数模块random 1.常用的几个方法: import randomprint(random.random()) #(0,1)之间的随机数字,如0.6772275352932792print( ...
- AspxDashBorad_OnDashboardLoaded 获取对应的DashboardParameter
protected void ASPxDashboardViewerThrend_OnDashboardLoaded(object sender, DashboardLoadedWebEventArg ...
- RGBA alpha 透明度混合算法
RGBA alpha 透明度混合算法 .分类: 图像处理 Ps技术 2011-05-25 09:11 1112人阅读 评论(0) 收藏 举报 Alpha 透明度混合算法,网上收集整理,分成以下三种: ...
- 超大jtl解析jar包使用源于testfan
解决超大jtl解析过慢时间过长问题: usage: java -jar jmeter-graph.jar jtl_path interval_time (单位:s) 10G文件分析测 ...
- php 法大大对接
通过编写扩展实现, 实现两种方式签署 1, 存证签署 存证签署流程 /** *个人 *客户在平台注册(姓名,身份证,手机号)---->三要素验证----->获取客户编号-------> ...
- bzoj 2049: [Sdoi]Cave 洞穴探测 （LCT）
第一次写lct (这是一道lct裸题 这次没有可爱(划掉)的同学教我,虽然有模板,但是配合网上的讲解还是看不懂QAQ 然后做了几道题之后总算有些感觉辣 于是决定给自己挖个坑,近期写一个lct详解(不过 ...
- 2019牛客多校第三场B Crazy Binary String 思维
Crazy Binary String 思维 题意 给出01串,给出定义:一个串里面0和1的个数相同,求 满足定义的最长子序列和子串 分析 子序列好求,就是0 1个数,字串需要思考一下.实在没有思路可 ...
- MySQL连接池详解
使用场景数据库连接是一种关键的.有限的.昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库连接池正是针对 ...
- python2.7 字符处理小节
unicode是字符集 utf-8,gbk是编码方式,将字符集编码为机器识别的字节码 #encoding: utf-8 s = "中文" #unicode的utf-8编码,\xE4 ...
- Hadoop中的java基本类型的序列化封装类
Hadoop将很多Writable类归入org.apache.hadoop.io包中,在这些类中,比较重要的有Java基本类.Text.Writable集合.ObjectWritable等,重点介绍J ...