jquery 学习
一、如何使用jquery
需要先导入jquery的js包,然后引用该js文件,在页面引入完成后可使用。
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
二、jquery语法
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
例子:
$("#username").val();
,表示选择一个id为username的元素的值
三、form表单提交与ajax提交的区别
form表单提交会跳转页面,而ajax提交可以在不跳转页面的情况下,进行请求,对返回结果进行处理。
例如,登录功能,用form表单提交,就会跳转到成功页面。用ajax提交,不跳转页面,成功的话,在当前页面显示成功提示,失败显示失败提示。
(1)form表单提交
<form action="/register/manager" method="get">
<p id="tip"></p>
<p>请输入用户名:<input id="username" name="userName"/></p>
<p>请输入登录密码:<input id="password" name="userPassword" type="password"/></p>
<input type="submit" value="提交"/>
</form>
(2) ajax提交
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function register() {
var username = $("#username").val();//jquery获取元素
var password = $("#password").val();
$.ajax({
url:"/register/manager",//请求的链接
data:{"userName":username,"userPassword":password},//要提交的参数
success: function(result){ //请求成功的话,会调用该函数,方法中的参数可以为任意,该参数代表返回结果
if(result === "success"){
alert("注册成功");
}
if(result === "fail"){
$("#tip").text("提示:该用户名已被注册");
}
console.log("获取到的响应结果:"+result);
}
})
}
</script>
四、ajax同步和异步的区别
默认是异步,如果要设置同步,需要增加async: false
funtion fun(){
$.ajax({
url:"/car/add",
type:"POST",
async: false,
data:{"bookId":bookIdLong,"userId":1,"quantity":1},
success:function(result){
if(result === "success"){
console.log("success");
}else{
alert("未知");
}
}
})
funa();
funb();
}
如果使用异步,则ajax的执行不影响funa和funb的执行
如果使用同步,则ajax先执行完,才能funa和funb