jQuery学习（二）

jQuery.ajax(url,options)

1、url指定请求的路径，比如http://localhost:8080/jQuery/ajax/json

相对路径，永远相对于当前文件

绝对路径，在web环境下指定的都是当前的http://主机：端口/开始算起

　　　　在jsp页面中，动态获取当前web应用的路径
　　　　　　jsp表达式 request.getContextPath()
　　　　　　EL表达式 $（pageContext.request.contextPath）
　　　　在velocity模板中，动态获取当前web应用的路径
　　　　　　$(request.contextPath)

2、option参数指的是一个JavaScript对象(键值对)

type属性用来指定请求方式，可以是post或get
data属性用来指定向服务器发送的数据，可以是字符串或键值对集合

　　　　字符串：username=ff&age=1
　　　　键值对集合：{"username":"ff","age":"1"}

success属性用来指定当请求成功后，怎么处理响应数据，需要指定一个带有参数的函数

　　　　"success":fuction(responseData){
　　　　}

dataType属性用来指定期望服务器返回的数据的类型，可以是

　　　　xml 返回xml文档
　　　　html 返回html文档
　　　　json 返回标准json格式的文本（jQuery会自动将字符串解析为js对象，如果没有自动完成转换，则可以通过jQuery.parseJson（string））
　　　　script 返回JavaScript代码

4、其他方法

jQuery.get() 相当于指定了请求方式为get
jQuery.post()相当于指定了请求方式为post
jQuery.getJson()相当于指定了请求方式为get并期望返回是json
jQuery.getScipt()相当于指定了请求方式为get并期望返回是script

3、测试案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery ajax</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var type ="click";
            var action = function () {
                var url = "/jQuery/ajax/json";
                var options = {
                    type:"post",
                    data:"name=xx&password=123",
                    dataType:"json",
                    success:function (resposeData) {
                        console.log(resposeData);
                        $("#show").html(resposeData.result+","+responseData.message);//document.querySelector("#show").innerHtml=resposeData
                    }
                }
                $.ajax(url,options);
            }
            $("#jsonbtn").bind(type,action);

            $("scriptbtn").bind("click",function () {
                var url = "/jQuery/ajax/script";
                var options = {
                    type:"post",
                    dataType:"script",
                    success:function (s) {
                        console.log(s);
                    }
                }
                $.ajax(url,options);
            });

            $("getscriptbtn").bind("click",function () {
                var url = "/jQuery/ajax/script";
                var options = {
                    success:function (s) {
                        console.log(s);
                    }
                }
                $.getScript(url,options);
            });
        });
    </script>
</head>
<body>
    <button type="button" id="jsonbtn">发送请求并期望发返回json</button>
    <button type="button" id="scriptbtn">发送请求并期望发返回script</button>
    <button type="button" id="getscriptbtn">发送get请求并期望发返回script</button>
    <div id="show" style="border: 1px solid #dedede"></div>
</body>
</html>

load()

1、load()是一个实例函数，必须获得一个jQuery实例后才能使用

2、测试案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery load</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var action = function(){
                $(".show").load("$(pageContext.request.contextPath)/ajax/normal");
            }
            setTimeout(action,3000);
        });
    </script>
</head>
<body>
    <h1>对待3秒钟就会出现</h1>
    <div class="show" style="border: 1px solid #dadadc;box-shadow: 0 0 5px 4px; 90%;"></div>
</body>
</html>

转载请于明显处标明出处

https://www.cnblogs.com/AmyZheng/p/9720574.html