jQuery中的Ajax

最新推荐文章于 2024-07-15 22:52:27 发布

BoreasMan

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41966617/article/details/108442068

版权

JavaScript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

jQuery中的Ajax

jQuery提供了六个Ajax操作方法

load()
$.get 和 $.post 方法
$.ajax 方法
$.getScript 方法和 $.JSON 方法

jQuery提供的事件

ajaxStart 和 ajaxStop
ajaxComlete、ajaxSend、ajaxError、ajaxSuccess 事件

load()方法

load()方法是jQuery中最为简单的Ajax方法

基本语法结构

$element.load(url,[data],[callback])

url：请求HTML页面的url地址
data：发送给服务器端的key/value形式的数据内容
callback：Ajax请求完成时的回调函数

load()方法的请求方式由是否传递参数决定如果传递参数为GET方式反之为POST方式

// HTML：<button id="btn">按钮</button>

$("button").click(function () {
    $("button").load("server.json", {
        name: "xyb"
    }, function () {
        console.log("异步请求成功")
    })
})

$. g e t () 和$ .post方法

$.get()方法使用GET方式向服务器端发送异步请求

基本语法结构

$.get(url,[data],[callback],[type])

url：请求的地址
data：请求的数据。键值对形式。
callback：请求完成时的回调函数。会将请求数据的结果作为回调函数的参数传入。
type：设置返回数据内容的格式。值为 xml、html、script、json、text等

// HTML：<button id="btn">按钮</button>

$("button").click(function(){
    $.get("server.json",{name:"xyb"},function(response) {
        console.log("请求成功")
        console.log(response)
    })
})

ajax()方法

$.ajax方法是jQuery中最为底层的Ajax方法

基本语法结构

$.ajax(url[settings])

url：请求地址
settings：设置异步请求的参数

$("button").click(function () {
    $.ajax("server.json", {
        type: "get",
        success: function (data) {
            console.log(data)
        }
    })
})

$.getScript()方法

$.getScript()方法是jQuery中用于动态加载指定JavaScript文件

基本语法结构

$.getScript(url[callback])

url：请求JavaScript文件的url地址
callback：指定JavaScript文件成功加载后的回调函数。

$("button").click(function () {
    // 动态加载指定的JavaScript文件 并执行 目的就是为了提升JS文件加载的时间 
    $.getScript("server.js", function (data) {
        console.log(data)
        eval(data)
    })
})

$.getJSON()方法

$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容

基本语法结构

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

url：请求JavaScript文件的url地址。
data：发送给服务器端的key/value形式的数据内容。
callback：指定JavaScript文件成功加载后的回调函数。

$("button").click(function () {
    // getJSON 请求方式为GET
    $.getJSON("server.json", function (data) {
        console.log(data)
    })
})

异步提交表单

<body>
    <form action="#">
        <input type="text" name="" id="name">
        <input type="submit">
    </form>
</body>


<script>
    $("form").bind("submit", function (event) {
        // 阻止默认行为
        event.preventDefault();
        // 获取表单组件内容数据
        let name = $("#name").val();
        console.log(name)
        // 构建发送给服务器的格式
        let data = "name" + name;
        // 异步交互提交表单
        $.post("server5.json",data,function(respone){
            console.log(data)
        })
    })
</script>

表单序列化

serialize () 方法

将表单组件对应的数据值序列化为指定格式的字符串内容。
serializeArray () 方法

将表单组件对应的数据值序列化为 JSON 格式的数据内容。

BoreasMan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的Ajax

jQuery中的AjaxjQuery提供了六个Ajax操作方法load()$.get 和 $.post 方法$.ajax 方法$.getScript 方法和 $.JSON 方法jQuery提供的事件ajaxStart 和 ajaxStopajaxComlete、ajaxSend、ajaxError、ajaxSuccess 事件load()方法load()方法是jQuery中最为简单的Ajax方法基本语法结构$element.load(url,[data],[callback]
复制链接

扫一扫