本案例包括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进行登录！的更多相关文章

  1. 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  2. 简单的jquery ajax文件上传功能

    /* * 图片上传 * 注意如果不加processData:false和contentType:false会报错 */ function uploadImage(image) { var imageF ...

  3. 一个简单的jquery ajax表单提交 带数据校验 layer弹框提示

    <input type="hidden" id="url" value="index.php"/> <form id=&q ...

  4. jquery ajax常用的登录登出

    整理jquery+ajax的登录登出方法. //登录 var currentUserId = -1; $(function() { var timestamp = (new Date()).value ...

  5. Jquery Ajax处理，服务端三种页面aspx,ashx,asmx的比较

    常规的Jquery Ajax 验证登录,主要有3种服务端页面相应 ,也就是 aspx,ashx,asmx即webserivice . 下面分别用3种方式来(aspx,ashx,asmx)做服务端来处理 ...

  6. jquery ajax return值不能取得的解决方案

    jQuery ajax - ajax() 方法 http://www.w3school.com.cn/jquery/ajax_ajax.asp http://www.cnblogs.com/fqw19 ...

  7. jquery ajax 不执行赋值，return没有返回值的解决方法

    大家先看一段简单的jquery ajax 返回值的js 复制代码 代码如下: function getReturnAjax{ $.ajax({ type:"POST", url:& ...

  8. jquery ajax 同步异步的执行

    jquery ajax 同步异步的执行   大家先看一段简单的jquery ajax 返回值的js 代码 function getReturnAjax{  $.ajax({    type:" ...

  9. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

随机推荐

  1. 是未来还是“有毒”？紧抓球鞋风口的毒APP机遇与危机并存

    编辑 | 于斌 出品 | 于见(mpyujian) 新一代的"潮流"之风正在席卷新生代消费市场,从去年开始,国内二手球鞋交易领域突然开始火爆,大有成为新一轮"风口&quo ...

  2. Java-POJ1007-DNA Sorting

    题目大意: 你的任务是分类DNA字符串(只有ACGT四个字符,所有字符串长度相同). 根据逆序数,排序程度从好到差. 第一次用到了“类”,和c++里的结构体有类似之处 一次AC,简单暴力的冒泡排序,要 ...

  3. Java + Selenium 无头浏览器模式

    我们说的无头模式,只是在爬虫执行的时候,不再弹出浏览器的界面,只是使用浏览器的内核进行爬取,下面是示例代码: //设置本地chromedriver地址 System.setProperty(" ...

  4. codeforces Make The Fence Great Again(dp)

    题目链接:http://codeforces.com/contest/1221/problem/D 题目要求ai ! = ai-1,草纸上推理一下可以发现每一个栅栏可以升高的高度无非就是 +0,+1, ...

  5. Python 字符串格式化操作 - format方法

    建议使用format()方法 字符串操作 对于 %, 官方以及给出这种格式化操作已经过时,在 Python 的未来版本中可能会消失. 在新代码中使用新的字符串格式.因此推荐大家使用format()来替 ...

  6. 2.1 【配置环境】 JDK + eclipse + selenium

    1.jdk以及eclipse的具体安装详见  http://www.cnblogs.com/ericazy/p/6082194.html 安装1.7 jdk即可 2.selenium 旧版本安装: s ...

  7. vue移动端项目在手机上调试

    1.电脑和手机要连同一个wifi  一定是复制无线网的IP,而不是以太网的IP 2.在你的电脑上查找无线网络的ipv4地址: 查找方法:windows+r   然后再输入框里输入cmd 回车 会出现这 ...

  8. 10day rpm简单用法qa ql qf "`"用法

    查看软件是否安装: [root@oldboyedu ~]# rpm -qa sl -q表示查询 -a表示所有 sl-5.02-1.el7.x86_64 查看软件包中有哪些信息 [root@oldboy ...

  9. 【原】docker基础（一）

    1.架构 2.说明 Docker daemon( Docker守护进程):Docker daemon是一个运行在宿主机( DOCKER-HOST)的后台进程.可通过 Docker客户端与之通信. Cl ...

  10. Python 特殊列表操作记录

    1.列表中的NaN数据处理 由于在Excel中筛选数据时,会出现NaN这种数据,所以需要将其删除掉,处理函数如下: 由于NaN数据类型与其他数据类型不一样,所以需要需要根据类型将其去除掉. 2列表关于 ...