Ajax提交参数

123小步

已于 2022-04-15 16:34:05 修改

阅读量1.3k

点赞数 2

分类专栏： javaScript 文章标签：开发语言 Ajax javascript jquery javaScript

于 2022-04-13 16:24:25 首次发布

本文链接：https://blog.csdn.net/abc98526/article/details/124145063

版权

javaScript 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

注:该文章必须先进行导入jQuery才能进行操作,不描述原生js是如何实现的！

1.什么是Ajax?

Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的web应用程序的技术！能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作，AJAX 代表异步 JavaScript 和 XML。

举个栗子:比如百度的搜索框,我们每输入一个字符就会向后台发送一条请求进行查找,返回推荐的数据进行展示,这就是使用了Ajax的好处,而如果是传统的则需要发送一次请求刷新一次浏览器,则用户体验会很差

2.Ajax的优点

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

3.伪造Ajax

我们也可以通过<iframe>标签和js进行伪造Ajax来进行不刷新网站返回信息如:


<body>
<div>
    <p>请输入要加载的地址<span id="Time"></span>:</p>
    <input type="text" id="url" value="https://www.baidu.com/">
    <input type="submit" value="提交" onclick="onloadPage()">
    
</div>
<div>
    <h3>加载页面的位置</h3>
    <iframe style="width: 100%;height: 500px;" id="iframePosition"></iframe>
</div>

<script>
    window.onload=function (){
        let Time = document.getElementById("Time");
        let date = new Date();
        Time.innerText=date.toLocaleString();
    }

    function onloadPage(){
        let value = document.getElementById("url").value;
        let iframePosition = document.getElementById("iframePosition");
        iframePosition.setAttribute("src",value);
    }
</script>
</body>
</html>

效果如下:

4.Ajax参数及定义语法:

//这是默认get请求
$.ajax({
    url:发送请求的地址,
    type:请求方式,
    timeout:设置请求超时时间(毫秒),
    async:必须为Boolean类型,设置异步(true默认)还是同步(false),
    cache:必须为Boolean类型,设置从浏览器缓存中加载请求信息，默认false,
    data:向服务器传入的信息,已键值对的方式表示,
    error:为Function类型,表示如果请求失败调用的函数,
    global：布尔类型,设置全局ajax请求,默认为true,
    username:要求为String类型的参数，用于响应HTTP访问认证请求的用户名,
    password:要求为String类型的参数，用于响应HTTP访问认证请求的密码,
    processData:必须为boolean,是否将发送的数据转换为对象，默认为true,
    success：需要接收服务器返回的信息函数
    
});

//这是post请求
$.post({...});

5.使用jQuery进行Ajax:

向服务器发送请求:

<body>
<%-- onblur：表示失去焦点时则执行a1()函数 --%>
用户名: <input type="text" id="userName" onblur="a1()">

<%-- 这里注意如果是下载的jquery注意路径问题 --%>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    function a1(){
        //将文本框的值发送给服务器,然后接收服务器返回的值
        let val = $("#userName").val();//获取输入框的值
        //ajax默认时get请求
        $.ajax({
            url:"${pageContext.request.contextPath}/Ajax",
            data:{"userName":val},
            success:function (data,statue) {//这里的data封装了服务器返回的数据
                alert(data);
            }
        });
    }
</script>
</body>

123小步

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax提交参数

1.什么是Ajax?Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的web应用程序的技术！能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作举个栗子:比如百度的搜索框,我们每输入一个字符就会向后台发送一条请求进行查找,返回推荐的数据进行展示,这就是使用了Ajax的好处,而如果是传统的则需要发送一次请求刷新一次浏览器,则用户体验会很差2.Ajax的优点不刷新页面更新网页在页面加载后从服务器请求数据在页面
复制链接

扫一扫