jQuery 常用点②

最新推荐文章于 2024-07-24 11:09:48 发布

菜鸟学习中心

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量95

点赞数

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

本文链接：https://blog.csdn.net/qq_23107065/article/details/104219582

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

六、ajax

1、ajax请求要保证不能跨域，web规范里面从安全的角度来说，必须在同一个域名上来运行。

2、$.get(四个参数)、 $.post(四个参数)

第四个参数： 从服务器返回来的预期数据类型，必须写，如果不写则返回来的是一个文本，文本不能转化成JS对象；而写明了数据类型返回的数据才能转化为JS对象
3、怎么处理ajax：
ajax请求 （在HTML文件里面发起），纯PHP能运行 （处理请求），PHP和HTML混编也能运行 （处理请求），没有哪种更流行之说，适用于不同的情况：
1、如果页面非常简单，一两个页面就能完成的，推荐混编。
2、如果是企业网站带有后台的那种，最好用框架来开发，这样更规范，安全方面框架也考虑到了，维护起来更方便，这时候你会发现控制器代码全部都是PHP，各个接口采用的也是用ajax方式来处理，但这个接口不是简单PHP文件 （单纯的$_GET()接收，如果恶意注入则PHP会报错，并且没有返回值什么的），而是用类或方法的形式来运行的 （这样能处理一些异常，返回错误信息，输出为空）

4、一个脚本执行的过程：
先从上到下把一条条语句《异步函数 （定时器、事件、ajax） 、普通语句》加载到队列中，如果遇到非异步函数，则执行，异步函数等全部语句加载到队列中时，再按序执行异步函数。（有深度遍历的的韵味）
在这里插入图片描述
上述过程伪代码：

5、异步的应用场景：
提交数据：如果用表单提交一次数据，不管信息是否正确都会刷新页面，如果其中某一个信息错误，则全部信息都要重新填写（非常麻烦）；而如果用异步提交数据则不会刷新页面，哪个信息错了就只改错了的信息。
6、ajax的主要应用就是用于页面的无刷新提交数据或者请求数据(在后台请求)
传统的button按钮没有type='button'属性,要想点击按钮能执行ajax请求，则必须加上该属性。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src='jquery-3.4.1.min.js'></script>
</head>

<body>
    <input type="text" name="name">
    <br>
    <input type="text" name="realname">
    <br>
    <input type="text" name="time">
    <button onclick="ajax_get()">Get请求</button>
    <button onclick="ajax_post()">Post请求</button>
    <button onclick="ajax()">AJAX请求</button>
    <script type="text/javascript">
    function ajax() {
        $.ajax({
            type: 'post',
            url: 'ajax.php',
            data: 'name=guowenfang&pwd=sordidez',
            async: false, //  是否异步执行
            // datatype: 'json',  // 未写的话，默认是返回json字符串格式的数据
            success: function(res) {
                // var res=JSON.parse(res);// JOSN 字符串（对象）转为JS对象
                console.log(res); //JSON 字符串
            },
            error: function(XMLHttpRequest, textStatus, erronThrown) {
            	console.log(XMLHttpRequest);
            	console.log(textStatus);
            	console.log(erronThrown);
            }
        })
    }


    function ajax_post() {
        $.post('post.php', { password: "guowenfang" }, function(res) {
            console.log(res);
        }, 'json')
    }

    function ajax_get() {
        $.get("get.php", { realname: '郭文芳' }, function(res) {
            // console.log(res.name);
            //console.log(res);  // JavaScript类型的对象
            $('input[name="name"]').val(res.name);
            $('input[name="realname"]').val(res.realname);
            $('input[name="time"]').val(res.time);

            // var arr = $('input');
            // $.each(arr, function(i, v) {
            //     console.log(v);
            // })
            // console.log(typeof(res));
        }, 'json') // 不传json返回的数据就是string类型，传了json就是json对象
    }
    </script>
</body>

</html>

七、效果

自定义

动画效果（移动），$(选择器).animete({样式名：样式}，时间)；（一般用CSS做）

八、事件

事件切换

将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。选择器.hover( handlerIn(eventObject), handlerOut(eventObject) ) ;

菜鸟学习中心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 常用点②

六、ajax1、ajax请求要保证不能跨域，web规范里面从安全的角度来说，必须在同一个域名上来运行。2、$.get(四个参数)、 $.post(四个参数)第四个参数：从服务器返回来的预期数据类型，必须写，如果不写则返回来的是一个文本，文本不能转化成JS对象；而写明了数据类型返回的数据才能转化为JS对象3、怎么处理ajax：ajax请求（在HTML文件里面发起），纯PHP能运行（处...
复制链接

扫一扫

专栏目录