由此表单form插件,方法通过Ajax请求加载服务器中的数据

  hi

  hi

前日睡得不错

又是两天未有做政工,后悔什么的只好带来更加多的后悔吗,好好做事,忘了二日前协调作出来的脱肛

为什么深夜大概看不进散文,宁愿做这些,也不愿认真看杂文。感觉上大概早上看杂文感觉温馨的多。然则近期有三十多篇要看哇。。。管球。。。

1、jQuery

1、jQuery

—–jQuery与AJAX—–(PS:ajax是怎么样请自行百度,或许看自个儿事先的博客,千万不要认为是阿贾克斯球队就好)

—–jQuery常用插件—–

—-使用load()方法异步请求数据

—-表单插件——form

使用load()措施通过Ajax请求加载服务器中的数据,并把再次回到的数量放置到钦赐的成分中,它的调用格式为:

通过表单form插件,调用ajaxForm()形式,完毕ajax形式向服务器交由表单数据,并通过措施中的options对象获得服务器重返数据,调用格式如下:

load(url,[data],[callback])

$(form). ajaxForm ({options})

参数url为加载服务器地址,可选项data参数为呼吁时发送的数据,callback参数为数量请求成功后,执行的回调函数。

里头form参数表示表单成分名称;options是三个安排对象,用于在出殡和埋葬ajax请求进程,设置发送时的数据和参数。

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>作者最爱吃的水果</span>
<span class=”fr”>
<input id=”btnShow” type=”button” value=”加载” />
</span>
</div>
<ul></ul>
</div>

<body>
<form id=”frmV” method=”post” action=”#”>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>个人新闻页</span>
<span class=”fr”>
<input id=”btnSubmit” type=”submit” value=”提交” />
</span>
</div>
<div class=”content”>
<span class=”fl”>用户名:</span><br />
<input id=”user” name=”user” type=”text” /><br />
<span class=”fl”>昵称:</span><br />
<input id=”nick” name=”nick” type=”text” />
<div class=”tip”></div>
</div>
</div>
</form>

<script type=”text/javascript”>
$(function () {
$(“#btnShow”).bind(“click”, function () {
var $this = $(this);
$(“ul”)
.html(“<img src=’Images/Loading.gif’ alt=”/>”)
.load(“http://www.imooc.com/data/fruit\_part.html",function(){
$this.attr(“disabled”, “true”);
});
})
});
</script>
</body>

<script type=”text/javascript”>
$(function () {
var options = {
url: “http://www.imooc.com/data/form\_f.php“,
target: “.tip”
}
$(“.content”).ajaxForm(options);
});
</script>
</body>

在意,用load()其瓜月素对空格敏感,比如url初始结尾不要有空格,比如function()前边不要有空格

—-图片灯箱插件——light博克斯

—-使用getJSON()方法异步加载JSON格式数据

该插件能够用圆角的方法呈现精选中的图片,使用按钮查看上下张图纸,在加载图片时自带进程条,还是能以自动播放的点子浏览图片,调用格式如下:

使用getJSON()情势能够经过Ajax异步请求的不二等秘书籍,获取服务器中的数组,并对获得的数目开始展览解析,展现在页面中,它的调用格式为:

$(linkimage).lightBox({options})

jQuery.getJSON(url,[data],[callback])$.getJSON(url,[data],[callback])

内部linkimage参数为涵盖图表的<a>成分名称,options为插件方法的布局对象。

里头,url参数为呼吁加载json格式文件的服务器地址,可选项data参数为呼吁时发送的多寡,callback参数为数量请求成功后,执行的回调函数。

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>小编的相册</span>
</div>
<div class=”content”>
<div class=”divPics”>
<ul>
<li><a
href=”http://img.mukewang.com/52e489f20001ecfc04480275.jpg
title=”第3篇风景图片”>
<img src=”http://img.mukewang.com/52e489f20001ecfc04480275.jpg
alt=”” />
</a></li>
<li><a
href=”http://img.mukewang.com/52e48a1e0001eec804480275.jpg
title=”第三篇风景图片”>
<img src=”http://img.mukewang.com/52e48a1e0001eec804480275.jpg
alt=”” />
</a></li>
<li><a
href=”http://img.mukewang.com/52e48a4c00015ad204480275.jpg
title=”第一篇风景图片”>
<img src=”http://img.mukewang.com/52e48a4c00015ad204480275.jpg
alt=”” />
</a></li>
</ul>
</div>
</div>
</div>

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>笔者最欣赏的壹项运动</span>
<span class=”fr”>
<input id=”btnShow” type=”button” value=”加载” />
</span>
</div>
<ul></ul>
</div>

<script type=”text/javascript”>
$(function () {
$(“.divPics”).lightBox({
overlayBgColor: “#666”, //图片浏览时的背景象
overlayOpacity: 0.五, //背景观的折射率
containerResizeSpeed: 600 //图片切换时的快慢
})
});
</script>
</body>

<script type=”text/javascript”>
$(function () {
$(“#btnShow”).bind(“click”, function () {
var $this = $(this);
$.getJSON(“http://www.imooc.com/data/sport.json",function(data){
$this.attr(“disabled”, “true”);
$.each(data, function (index, sport) {
if(index==3)
$(“ul”).append(“<li>” + sport[“name”] + “</li>”);
});

—-图片放大镜插件——jqzoom

});
})
});
</script>
</body>

在调用jqzoom图片放大镜插件时,供给预备一大学一年级小两张1样的图纸,在页面中展现小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()艺术,展现与小图片相同的大图片区域,从而完毕放大镜的效率,调用格式如下:

—-使用getScript()方法异步加载并执行js文件

$(linkimage).jqzoom({options})

使用getScript()方法异步请求并实行服务器中的JavaScript格式的文书,它的调用格式如下所示:

其间linkimage参数为含有图表的<a>成分名称,options为插件方法的陈设对象。

jQuery.getScript(url,[callback])$.getScript(url,[callback])

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>图片放大镜</span>
</div>
<div class=”content”>
<a href=”http://img.mukewang.com/52e4aec90001924d06800599.jpg
id=”jqzoom” title=”小兔子乖乖”>
<img src=”http://img.mukewang.com/52e4aee700012df702130212.jpg
alt=””/>
</a>
</div>
</div>

参数url为服务器请求地址,可选项callback参数为呼吁成功后进行的回调函数。

<script type=”text/javascript”>
$(function () {
$(“.content”).jqzoom({ //绑定图片放大插件jqzoom
zoomWidth: 1二三, //小图片所选区域的宽
zoomHeight: 1二三, //小图片所选区域的高
zoomType: ‘reverse’ //设置放大镜的档次
});
});
</script>
</body>

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>作者最欣赏的移位</span>
<span class=”fr”>
<input id=”btnShow” type=”button” value=”加载” />
</span>
</div>
<ul></ul>
</div>

—-cookie插件——cookie

<script type=”text/javascript”>
$(function () {
$(“#btnShow”).bind(“click”, function () {
var $this = $(this);
$.getScript(“http://www.imooc.com/data/sport\_f.js",function(){
$this.attr(“disabled”, “true”);
});
})
});
</script>
</body>

行使cookie插件后,能够很便宜地经过cookie对象保存、读取、删除用户的信息,仍是能够由此cookie插件保存用户的浏览记录,它的调用格式为:

—-使用get()方法以GET格局从服务器获取数据

保存:$.cookie(key,value);读取:$.cookie(key),删除:$.cookie(key,null)

使用get()办法时,选取GET方式向服务器请求数据,并通过措施中回调函数的参数再次来到请求的数目,它的调用格式如下:

内部参数key为保留cookie对象的名号,value为名称对应的cookie值。

$.get(url,[callback])

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>cookie插件</span>
<span class=”fr”>
<input id=”btnSet” type=”button” value=”设置” />
</span>
</div>
<div class=”content”>
<span class=”fl”>邮箱:</span><br />
<input id=”email” name=”email” type=”text” /><br />
<input id=”chksave” type=”checkbox” />是或不是保存邮箱
</div>
</div>

参数url为服务器请求地址,可选项callback参数为呼吁成功后实施的回调函数。

<script type=”text/javascript”>
$(function () {
if ($.cookie(“email”)) {
$(“#email”).val($.cookie(“email”));
}
$(“#btnSet”).bind(“click”, function () {
if ($(“#chksave”).is(“:checked”)) {
$.cookie(“email”,$(“#email”).val()), {
path: “/”, expires: 7
})
}
else {
$.cookie(“email”,null), {
path: “/”
})
}
});
});
</script>
</body>

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>作者的个人资料</span>
<span class=”fr”>
<input id=”btnShow” type=”button” value=”加载” />
</span>
</div>
<ul></ul>
</div>

—-搜索插件——autocomplete

<script type=”text/javascript”>
$(function () {
$(“#btnShow”).bind(“click”, function () {
var $this = $(this);
$.get(“http://www.imooc.com/data/info\_f.php",function(data){
$this.attr(“disabled”, “true”);
$(“ul”).append(“<li>小编的名字叫:” + data.name + “</li>”);
$(“ul”).append(“<li>男朋友对自身说:” + data.say + “</li>”);
}, “json”);
})
});
</script>
</body>

检索插件的功力是由此插件的autocomplete()方法与公事框相绑定,当文本框输入字符时,绑定后的插件将重返与字符周边的字符串提醒选用,调用格式如下:

—-使用post()方法以POST格局从服务器发送数据

$(textbox).autocomplete(urlData,[options]);

get()办法相比较,post()艺术多用于以POST方式向服务器发送数据,服务器收到到数量现在,进行拍卖,并将处理结果重回页面,调用格式如下:

其间,textbox参数为文本框成分名称,urlData为插件重回的近乎字符串数据,可挑选参数options为调用插件方法时的配置对象。

$.post(url,[data],[callback])

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>搜索插件</span>
</div>
<div class=”content”>
<span class=”fl”>用户名</span><br />
<input id=”txtSearch” name=”txtSearch” type=”text” />
<div class=”tip”>
</div>
</div>
</div>

参数url为服务器请求地址,可选项data为向服务器请求时发送的数量,可选项callback参数为呼吁成功后进行的回调函数。

<script type=”text/javascript”>
$(function () {
var arrUserName = [“王五”, “刘明”, “李小四”, “刘促明”, “李渊”,
“张小三”, “王小明”];
$(“#txtSearch”).autocomplete(arrUserName,{
minChars: 0, //双击空白文本框时呈现全部提示数据
formatItem: function (data, i, total) {
return “<I>” + data[0] + “</I>”;
//改变相配数据体现的格式
},
formatMatch: function (data, i, total) {
return data[0];
},
formatResult: function (data) {
return data[0];
}
}).result(SearchCallback);
function SearchCallback(event, data, formatted) {
$(“.tip”).show().html(“您的精选是:” + (!data ? “空” : formatted));
}
});
</script>
</body>

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>检验数字是不是大于0</span>
<span class=”fr”><input id=”btnCheck” type=”button”
value=”检测” /></span>
</div>
<ul>
<li>请求输入三个数字 <input id=”txtNumber” type=”text”
size=”12″ /></li>
</ul>
</div>

—-右键菜单插件——contextmenu

<script type=”text/javascript”>
$(function () {
$(“#btnCheck”).bind(“click”, function () {
$.post(“http://www.imooc.com/data/check\_f.php",{
num:$(“#txtNumber”).val()
},
function (data) {
$(“ul”).append(“<li>你输入的<b> ”

右键菜单插件能够绑定页面中的任意成分,绑定后,选桐月素,点击右键,便通过该插件弹出一个神速菜单,点击菜单各项名称执行相应操作,调用代码如下:

  • $(“#txtNumber”).val() + ” </b>是<b> ”
  • data + ” </b></li>”);
    });
    })
    });
    </script>
    </body>

$(selector).contextMenu(menuId,{options});

此地的val()是收获在此以前的selector的值,jQuery的函数

Selector参数为绑定插件的要素,meunId为急迅菜单成分,options为布局对象。

—-使用serialize()方法种类化表单元素值

<body>
<div id=”divtest”>
<div class=”title”><span
class=”fl”>点击右键</span></div>
<div class=”content”>
<input id=”btnSubmit” type=”button” value=”提交” />
<div class=”tip”></div>
</div>
<div class=”contextMenu” id=”sysMenu”>
<ul>
<li id=”Li3″><img
src=”http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg” alt=””
/>保存</li>
<li id=”Li4″><img
src=”http://img.mukewang.com/52e4b3680001424900160016.jpg” alt=””
/>退出</li>
</ul>
</div>
</div>

使用serialize()措施能够将表单中有name属性的因素值进行系列化,生成标准U帕杰罗L编码文本字符串,直接可用来ajax请求,它的调用格式如下:

<script type=”text/javascript”>
$(function () {
$(“#btnSubmit”).contextMenu(‘sysMenu’,
{ bindings:
{
‘Li3’: function (Item) {
$(“.tip”).show().html(“您点击了“保存”项”);
},
‘Li4’: function (Item) {
$(“.tip”).show().html(“您点击了“退出”项”);
}
}
});
});
</script>
</body>

$(selector).serialize()

—-自定义对象级插件——lifocuscolor插件

其间selector参数是二个或四个表单中的成分或表单成分本身。

自定义的lifocuscolor插件能够在<ul>成分中,鼠标在表项<li>元素移动时,自定义其拿走关节时的背景象,即定义<li>成分选中时的背景观,调用格式为:

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>小编的个人资料</span>
<span class=”fr”>
<input id=”btnAction” type=”button” value=”序列化” />
</span>
</div>
<form action=””>
<ul>
<li>姓名:<input name=”Text1″ type=”text” size=”12″
/></li>
<li>
<select name=”Select1″>
<option value=”0″>男</option>
<option value=”1″>女</option>
</select>
</li>
<li><input name=”Checkbox一” type=”checkbox” />资料是不是可知</li>
<li id=”litest”></li>
</ul>
</form>
</div>

$(Id).focusColor(color)

<script type=”text/javascript”>
$(function () {
$(“#btnAction”).bind(“click”, function () {
$(“#litest”).html($(“form”).serialize());
})
})
</script>
</body>

中间,参数Id表示<ul>成分的Id号,color代表<li>成分选中时的背景象。

—-使用ajax()方法加载服务器数据

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>对象级别的插件</span>
</div>
<div class=”content”>
<ul id=”u1″>
<li><span>橘子</span><span>水果</span></li>
<li><span>芹菜</span><span>蔬菜</span></li>
<li><span>香蕉</span><span>水果</span></li>
</ul>
</div>
</div>

使用ajax()艺术是最底部、效用最有力的伏乞服务器数据的点子,它不只可以够取得服务器再次来到的数据,仍是可以够向服务器发送请求并传递数值,它的调用格式如下:

<script type=”text/javascript”>
$(function () {
$(“.content”).focusColor(“#ccc”);//调用自定义的插件
})
</script>
</body>

jQuery.ajax([settings])$.ajax([settings])

—-自定义类级别插件—— twoaddresult

其间参数settings为发送ajax请求时的布置对象,在该对象中,url表示服务器请求的路线,data为呼吁时传递的多寡,dataType为服务器重临的数据类型,success为呼吁成功的实践的回调函数,type为发送数据请求的措施,暗中同意为get。

由此调用自定义插件twoaddresult中的区别情势,能够兑现对八个数值举行相加和相减的运算,导入插件后,调用格式分别为:

 

$.addNum(p1,p2)$.subNum(p1,p2)

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>检查测试数字的奇偶性</span>
<span class=”fr”>
<input id=”btnCheck” type=”button” value=”检测” />
</span>
</div>
<ul>
<li>请求输入二个数字
<input id=”txtNumber” type=”text” size=”12″ />
</li>
</ul>
</div>

上述调用格式分别为计算两数值相加和相减的结果,p1和p二为随机数值。

<script type=”text/javascript”>
$(function () {
$(“#btnCheck”).bind(“click”, function () {
$.ajax({
url:”http://www.imooc.com/data/check.php“,
data: { num: $(“#txtNumber”).val() },
type:”post”,
success: function (data) {
$(“ul”).append(“<li>你输入的<b> ”

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>自定义类级别插件</span>
<span class=”fr”>
<input id=”btnCount” type=”button” value=”计算” />
</span>
</div>
<div class=”content”>
两数相减:

  • $(“#txtNumber”).val() + ” </b>是<b> ”
  • data + ” </b></li>”);
    }
    });
    })
    });
    </script>
    </body>

<input id=”Text1″ type=”text” class=”txt” />

—-使用ajaxSetup()方法设置全局Ajax暗中认可选项

<input id=”Text2″ type=”text” class=”txt” />

<input id=”Text3″ type=”text” class=”txt” />
</div>
</div>

<script type=”text/javascript”>
$(function () {
$(“#btnCount”).bind(“click”, function () {
$(“#Text3”).val(
$.subNum($(“#Text1”).val(),$(“#Text2”).val())
);
});
});
</script>
</body>

 2、MySQL&PHP

—–php内置MySQL函数(一)—–

—-连接数据库

mysql_connect

mysql_connect(‘localhost’,’root’,”);

也正是说这么些函数有三个参数,数据库名大概ip地址,用户名,密码

在意,一般认为mysql_connect在后来的版本不再扶助(php伍.5以往版本仿佛)改用mysqi_connect就足以了

<?php
if(mysqli_connect(‘localhost’,’root’,”)){
echo “连接成功”;

}else{
echo “shit”;
}

测试代码如上

一连成功后,会回到mysql连接标识符(用处下边会提到);退步的话会再次回到false

数据库增加

PHP中三个数据库大概有贰个依然多个扩展,个中既有官方的,也有第一方提供的。像Mysql常用的壮大有原生的mysql库,也得以应用增强版的mysqli扩大,还足以利用PDO举行连接与操作。

不一样的扩张提供基本相仿的操作方法,不相同的是唯恐全体一些新特征,以及操作品质恐怕会迥然差别。

mysql扩展进行数据库连接的情势:

$link = mysql_connect('mysql_host', 'mysql_user', 'mysql_password');

mysqli扩展:

$link = mysqli_connect('mysql_host', 'mysql_user', 'mysql_password');

PDO扩展

$dsn = 'mysql:dbname=testdb;host=127.0.0.1';
$user = 'dbuser';
$password = 'dbpass';
$dbh = new PDO($dsn, $user, $password);

 —-关闭数据库连接

mysql_close

 mysql_close($con);关闭上一条的连天,那里的$con是mysql_connect()成功后归来的标识符

$con=mysqli_connect(‘localhost’,’root’,”,’info’);

—-采纳数据库

mysql_select_db()

<?php
$con=mysqli_connect(‘localhost’,’root’,”,’info’);
if($con){
echo “连接成功”;
}else{
echo “shit”;
}
//mysql_close($con);
if(mysqli_select_db($con, ‘info’)){
echo “成功”;
}else{
echo “shit”;
}

出于本身的php版本较高,mysql基本不认,所以小编都改用mysqli,可是基本用法都大致,正是参数要专注一下。一般的话,编写翻译软件(小编用Zend)都以有提示的,不用操心

—-执行SQL语句

mysqli_query()

mysqli_query($con, “INSERT test(name) VALUES(‘Tom’)”);

mysqli是须求连接的,$con

—执行MySQL查询

在数据库建立连接今后就足以展开查询,接纳mysql_query加sql语句的情势向数据库发送查询指令。

$res = mysql_query('select * from user limit 1');

对此查询类的语句会再次来到3个财富句柄(resource),可以透过该能源得到查询结果集中的数据。

$row = mysql_fetch_array($res);
var_dump($row);

私下认可的,PHP使用以来的数据库连接执行查询,但借使存在多少个一连的事态,则能够经过参数指令从那么些连接中展开查询。

$link1 = mysql_connect('127.0.0.1', 'code1', '');
$link2 = mysql_connect('127.0.0.1', 'code1', '', true); //开启一个新的连接
$res = mysql_query('select * from user limit 1', $link1); //从第一个连接中查询数据

<?php
//连接数据库
mysql_connect(‘127.0.0.1’, ‘code1’, ”);
mysql_select_db(‘code1’);
mysql_query(“set names ‘utf8′”);
//在此地开展多少查询
$res = mysql_query(“select * from user limit 1”);

$row = mysql_fetch_array($res);

var_dump($row);

—插入新数据到MySQL中

当咱们询问了怎么行使mysql_query进行数量查询今后,那么看似的,插入数据实际上也是因而履行多少个sql语句来落到实处,例如:

$sql = "insert into user(name, age, class) values('李四', 18, '高三一班')";
mysql_query($sql); //执行插入语句

普普通通数据都以储存在变量可能数组中,由此sql语句须要先举办字符串拼接获得。

$name = '李四';
$age = 18;
$class = '高三一班';
$sql = "insert into user(name, age, class) values('$name', '$age', '$class')";
mysql_query($sql); //执行插入语句

在mysql中,执行插入语句以后,能够赢得自增的主键id,通过PHP的mysql_insert_id函数能够拿走该id。

$uid = mysql_insert_id();

以此id的成效一点都相当大,平时能够用来判定是还是不是插入成功,或许当做涉及ID进行其余的数码操作。

<?php
//连接数据库
mysql_connect(‘127.0.0.1’, ‘code1’, ”);
mysql_select_db(‘code1’);
mysql_query(“set names ‘utf8′”);
//已知的数据变量有
$name = ‘李四’;
$age = 18;
$class = ‘高3一班’;
//在此间举行数量查询
$sql=”insert into user(name,age,class) value
(‘$name’,’$age’,’$class’)”;
mysql_query($sql);
$uid=mysql_insert_id();
print_r($uid);

 

 

 

要返重播中中原人民共和国队的比赛了,前几天继续

使用ajaxSetup()措施能够安装Ajax请求的片段大局性选项值,设置完毕后,前面包车型客车Ajax请求将不须要再添加那几个选项值,它的调用格式为:

jQuery.ajaxSetup([options])$.ajaxSetup([options])

可选项options参数为2个对象,通过该目的设置Ajax请求时的大局选项值。

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>奇偶性和是还是不是大于0</span>
<span class=”fr”>
<input id=”btnShow_1″ type=”button” value=”验证1″ />
<input id=”btnShow_2″ type=”button” value=”验证2″ />
</span>
</div>
<ul>
<li>请求输入2个数字
<input id=”txtNumber” type=”text” size=”12″ />
</li>
</ul>
</div>

<script type=”text/javascript”>
$(function () {
$.ajaxSetup({
url:”http://www.imooc.com/data/check.php“,
data: { num: $(“#txtNumber”).val() },
type:”post”,
success:function(data){$(“ul”).append(“<li>你输入的<b> ”

  • $(“#txtNumber”).val() + ” </b>是<b> ”
  • data + ” </b></li>”);
    }
    });
    $(“#btnShow_1”).bind(“click”, function () {
    $.ajax({
    data: { num: $(“#txtNumber”).val() },
    url: “http://www.imooc.com/data/check.php
    });
    })
    $(“#btnShow_2”).bind(“click”, function () {
    $.ajax({
    data: { num: $(“#txtNumber”).val() },
    url: “http://www.imooc.com/data/check\_f.php
    });
    })
    });
    </script>
    </body>

—-使用ajaxStart()和ajaxStop()方法

ajaxStart()ajaxStop()主意是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求实现后触发函数。它们的调用格式为:

$(selector).ajaxStart(function())$(selector).ajaxStop(function())

里头,三个格局中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop
()方法绑定的函数。

<body>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>加载壹段文字</span>
<span class=”fr”>
<input id=”btnShow” type=”button” value=”加载” />
</span>
</div>
<ul>
<li id=”divload”></li>
</ul>
</div>

<script type=”text/javascript”>
$(function () {
$(“#divtest”).ajaxStart(function(){
$(this).html(“正在呼吁数据…”);
});
$(“#divtest”).ajaxStop(function(){
$(this).html(“数据请求完毕!”);
});
$(“#btnShow”).bind(“click”, function () {
var $this = $(this);
$.ajax({
url: “http://www.imooc.com/data/info\_f.php“,
dataType: “json”,
success: function (data) {
$this.attr(“disabled”, “true”);
$(“ul”).append(“<li>笔者的名字叫:” + data.name + “</li>”);
$(“ul”).append(“<li>男朋友对自我说:” + data.say + “</li>”);
}
});
})
});
</script>
</body>

—–jQuery常用插件—–

 —-表单验证插件——validate

该插件自带包括必填、数字、ULX570L在情节的证实规则,即时展现万分音信,其余,还同意自定义表达规则,插件调用方法如下:

$(form).validate({options})

中间form参数表示表单成分名称,options参数表示调用方法时的布署对象,全体的验证规则和非常消息展现的职位都在该目的中展开设置。

 

<body>
<form id=”frmV” method=”get” action=”#”>
<div id=”divtest”>
<div class=”title”>
<span class=”fl”>表单验证插件</span>
<span class=”fr”>
<input id=”btnSubmit” type=”submit” value=”提交” />
</span>
</div>
<div class=”content”>
<span class=”fl”>邮箱:</span><br />
<input id=”email” name=”email” type=”text” /><br />
<span class=”tip”></span>
</div>
</div>
</form>

<script type=”text/javascript”>
$(function () {
$(“#frmV”).validate(
{
/*自定义表明规则*/
rules: {
email:{
required:true,
email:true
}
}
},
/*不当提醒地方*/
errorPlacement: function (error, element) {
error.appendTo(“.tip”);
}
}
);
});
</script>
</body>
</html>

 

 

 

相关文章