<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<h2>用户登录</h2>
<form>
<p>用户名<input type="text" name="name"></p>
</form>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
/**
* $.ajax()
* $.get(),$.post()...都是它的特殊形式
* 语法$.ajax()
* 参数写在js对象自变量中
* 参数众多
*/
// 当失去焦点时进行验证
$(':input').blur(function(){
$.ajax({
// 请求服务器的资源，必须是字符串
url: 'api/3.php',
// 客服端请求的类型:GET,POST...,推荐大写
type: 'GET',
// 从服务器返回的数据格式：xml,html,json,txt....
// dataType: 'json',
//
// 异步true,还是同步false
// async:true,
// 发送数据
// 1查询字符串键值对，多个值之间用&连接
// data:'name='+$(':input')val(),
// 2json格式
// data:{'name':$(':input').val()},
// 3当表单有多个字段时使用序列化方式可提高效率
// 将表单控件内容序列化查询键值对格式
// data:$('from:first').serialize(),
// 将表单控件内容序列化为json格式
data:$('form:first').serializeArray(),
// 成功回调
success: function(msg,status,xhr){
console.log(msg)
$('p span').empty()
$('p').append($(msg))
}
})
})
</script>
</html>
