Ajax异步交互与跨域访问（三）JQuery中的Ajax

最新推荐文章于 2023-11-09 13:54:36 发布

lybinWeb

最新推荐文章于 2023-11-09 13:54:36 发布

阅读量4.1k

点赞数

分类专栏： Ajax异步交互与跨域访问文章标签： ajax jquery js

本文链接：https://blog.csdn.net/Lyb__/article/details/108255693

版权

Ajax异步交互与跨域访问专栏收录该内容

8 篇文章 1 订阅

订阅专栏

jQuery中的Ajax

一、jQuery提供的六个Ajax操作方法

1、load()方法

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

参数：
- url:异步请求的HTML 页面的url地址。
- data: 发送给服务器端的key/value形式的数据内容。
  - 如果省略请求数据的话，当前的请求方式为GET
  - 如果发送请求数据的话，当前的请求方式为POST
- callback: Ajax请求完成时的回调函数。
返回值：
- 服务器端的响应结果
注意：自动返回结果写入到元素中

2、 $. g e t () 与$ .post()方法

$.get()

请求方式为GET

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

参数：

url:请求HTML页面的url地址。
data:发送给服务器端的key/value形式的数据内容。
callback: Ajax请求完成时的回调函数。
type:设置返回数据内容的格式。值为xml、html、 script、 JSON、 text和_default。

$.post()

跟get一样

3、$.ajax()方法

$.ajax(url,[settings])

参数：

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

settings选项对象类型:

type -设置请求方式
data- 发送给服务器端的请求数据
dataType -服务器端响应结果的格式
success -异步请求成功后的回调函数
- function(data, textStatus, jqXHR){}
  - data-表示服务器端响应的结果
  - textStatus -表示服务器端当前的状态
  - jqXHR - Ajax中的核心对象

$.ajax('url',{
	type:'',
	dataType:'',
	success:function(){
	
	}
})

4、$.getScript()方法

是jQuery中动态加载js文件的方法

$.getScript(url,[callback])

5、$.getJSON()方法

请求方式始终是：GET

三级联动案例

ssk.json

[
  {
    "name":"javascript",
    "value": [
      "java","javascript"
    ]
  },
  {
    "name": "jquery",
    "value": [
      "jquery","锋利的JQuery"
    ]
  }
]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框</title>
    <style>
        .container #search {
            width: 500px;
        }
        .container .alert {
            width: 500px;
            border: 1px solid lightgray;
            display: none;
        }
        .container .alert ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="container">
<!--    搜索框-->
    <input type="text" id="search">
<!--    提示框-->
    <div class="alert">
        <ul>
            <li>前端开发</li>
            <li>前端课程</li>
            <li>Web课程</li>
        </ul>
    </div>
</div>
<script src="js/jquery-1.10.1.js"></script>
<script >
    // 捕获用户输入行为：
    /*
    *  1、绑定键盘事件 keydown  keyup  keypress
    *  2、键盘输入事件 input
    *
    */
    $('#search').bind('keydown',function () {
        $('.alert>ul').empty()
        // 根据输入的内容动态的获取相关提示数据
        var inputValue = $(this).val()
        $.getJSON('data/ssk.json',function (data) {
            // 遍历json
            $.each(data,function (index,obj) {
                var name = obj.name
                if(name.indexOf(inputValue)  >= 0){
                    var value = obj.value
                    $.each(value,function (index,text) {
                        $('.alert>ul').append($('<li>'+text+'</li>'))
                    })
                }
            })
        })
        // 将提示框隐藏状态切换到显示状态
        $('.alert').css('display','block')
    }).bind('blur',function () {
        $('.alert').css('display','none')
    })
</script>
</body>
</html>

二、异步提交表单

通过Ajax异步交互方式提交表单

步骤如下：

获取表单及所有表单组件对应的数据值。
将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。
通过Ajax异步交互方式提交表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
<script src="js/jquery-1.10.1.js"></script>

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

<script >
    $('form').bind('submit',function (event) {
        event.preventDefault()
        // 获取表单组件内容
        var name = $('#name').val()
        // 构建发送给服务器端的数据格式
        var data = 'name=' + name
        // 通过异步交互提交表单
        $.post('data/server.js',data,function (res) {
            console.log(res)
        })
    })
</script>
</body>
</html>

三、表单序列化

serialize(方法: 将表单组件对应的数据值序列化为指定格式的字符串内容。
$('form").serialize()
serializeArray(方法: 将表单组件对应的数据值序列化为、JSON格式的数据内容。
香
$('select, :radio').serializeArray()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单序列化</title>
</head>
<body>
<script src="js/jquery-1.10.1.js"></script>

<form action="">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="pwd">
    <input type="submit">
</form>

<script >
    $('form').bind('submit',function (event) {
        event.preventDefault()

        // 表单序列化、
        // var data = $('form').serialize()
        var data = $('form').serializeArray()
        console.log(data)
        // 通过异步交互提交表单
        $.post('data/server.js',data,function (res) {
            console.log(res)
            
        })
    })
</script>
</body>
</html>

lybinWeb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax异步交互与跨域访问（三）JQuery中的Ajax

jQuery中的Ajax一、jQuery提供的六个Ajax操作方法1、load()方法$element.load(url,[data],[callback])参数：url:异步请求的HTML 页面的url地址。data: 发送给服务器端的key/value形式的数据内容。如果省略请求数据的话，当前的请求方式为GET如果发送请求数据的话，当前的请求方式为POSTcallback: Ajax请求完成时的回调函数。返回值：服务器端的响应结果注意：自动返回结果写入到元素中
复制链接

扫一扫