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