实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>load</title>
</head>
<body>
<img src="../0410/images/gyy.jpg" width="150">
<div></div>
<button>点击</button>
<h2>用户登录</h2>
<form>
<p>用户名:<input type="text" name="name"></p>
</form>
</body>
</html>
<script type="text/javascript" src="../0410/js/jquery.js"></script>
<script type="text/html">
$('button').eq(0).on('click',function () {
$('div').eq(0).load('api/info.php','age=31&sex=女',function () {
$('img').css('border-radius','50%')
}
)
})
</script>
<!--get方法-->
<script type="text/html">
$('button').first().click(function () {
/**
* $.get(url,data,success)
* 功能: 从服务器上异步地获取数据
* 参数: url 请求的服务器处理脚本或数据源
* data 发送给服务器的数据,通常是查询字符串
* success 获取成功的回调处理函数
* 模式:
* 1.单向: 仅获取数据
* 2.双向: 根据客户端提供的条件进行查询后返回指定数据
*/
var url = 'api/data.php'
var data = {
// 'name': 'site'
'name': 'domain'
// 'name': 'hello'
}
var success = function(res){
$('div').html(res)
}
$.get(url,data,success)
})
</script>
<script>
/**
* $.ajax()
* 功能:是jquery中的Ajax底层方法,之前学过的$.get(),$.post...都它的特殊形式
* 语法: $ajax()
* 参数: 参数写到js对象字面量中
* 注:因参数众多,下面用实例进行说明
*/
// 当失去焦点的时候进行验证
$(':text').blur(function () {
// 使用ajax进行异步验证
$.ajax({
//请求的服务器资源,必须是字符串
url: 'api/demo.php',
//客户端的请求类型:GET,POST...,推荐大写
type:'GET',
//从服务器端返回的数据类型格式:xml,html,json,txt等
// dataType:'json',
//异步true,还是同步false(锁定浏览器)
async:true,
// 当表单有多个字段时使用序列化方法可提高效率
data:$('form').first().serializeArray(),
//成功回调
success:function (msg,status,xhr) {
console.log(msg)
$('p span').empty()
$('p').append($(msg))
}
}
)
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
