博主信息
博文 64
粉丝 2
评论 1
访问量 59001
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
$.ajax()用法——2018年4月10日
Y的博客
原创
740人浏览过

效果图:

360截图16410115508035.jpg

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.aiax()</title>
	<style type="text/css">
	div {
		margin: auto;
		background-color: lightskyblue;
		width: 400px;
		height: auto;
		padding: 10px;
		text-align: center;
	}
    button {
     border: none;
     background-color: #1EF010;
     width: 80px;
     height:30px;
     cursor: pointer;
    }
</style>
</head>
<body>
	<div>
		<h3>用户登录</h3>
		<form>
			<p>用户名: <input type="text" name="name" id="name"></p>
			<p>密  码:<input type="password" name="password" id="password"></p>
			<button>注册</button>
		</form>
	</div>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	 //当失去焦点时时行验证
	  $('#name').blur(function(){
	  	//全部参数写到$.ajax()参数中
		$.ajax({
		//请求的服务器资源,必须是字符串
		url: 'api/demo.php',
		//客户端的请求类型:GET,POST...,推荐大写
		type: 'GET',
		//将表单控件内容序列化为json格式
		data: $('form').serializeArray(),
		//成功回调
		success: function(msg,status,xhr) {
			console.log(msg)
			$('p span').empty()
           $('p').append($(msg))
		}
		})
	})
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄:

QQ图片20180411151626_副本.jpg
总结:

当失去焦点时时行验证:$(':input').blur(function(){}

全部参数写到$.ajax()参数中

$.ajax({

请求的服务器资源,必须是字符串

url: 'api/demo.php',

客户端的请求类型:GET,POST...,推荐大写

type: 'GET',

将表单控件内容序列化为json格式

data: $('form:first').serializeArray()

成功回调

success: function(msg,status,xhr) {}

})

前端的内容已经学完,收获颇多。从当初什么都知道的小白到现在的懵懵懂懂。感觉越学习越明白自己知道的太少。在学习方面没有捷径,只有多写、多看、多查,遇到错误不要放弃。不懂的内容多去查查,不熟悉的语句多去写写。自然就会了。

最近感觉自己的劲头没有刚学习的时候强烈,有些放松。还是要对自己严格要求,好好跟着老师学习。

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学