Ajax快速入门

最新推荐文章于 2024-06-09 22:42:52 发布

Dragon～～～

最新推荐文章于 2024-06-09 22:42:52 发布

阅读量61

点赞数

本文链接：https://blog.csdn.net/weixin_44905129/article/details/117961436

版权

本文介绍了如何通过Ajax实现网页与服务器之间的数据交互，包括GET和POST请求的使用，以及dataType参数设置为json以处理返回的JSON数据。示例代码展示了$.ajax、$.get、$.post和$.getJSON的方法，用于从data.txt和data.json文件获取数据。

摘要由CSDN通过智能技术生成

Ajax

在这里插入图片描述

目录结构：

在这里插入图片描述

这样也可以访问到data.txt文件

在这里插入图片描述

Ajax代码：

将字符串转为json格式输出（访问的是data.txt）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
    <script type="text/javascript">
        $.ajax({
            type:"get",//get方式请求
            url:"js/data.txt",
            data:{
                //uerName:"xyy" //如果没有参数，则不需要设置
            },
            success:function (dta) {//data是形参名，和上面的data不是一个
                console.log(dta);//返回的是字符串
                var obj = JSON.parse(dta);//将字符串转为json格式
                console.log(obj);//json格式
            }
        })
    </script>
</body>
</html>

设置返回类型:

dataType:“json”,

$.ajax({
            type:"get",//get方式请求
            url:"js/data.txt",
            data:{
                // uerName:"xyy"
            },
            dataType:"json", //预期返回的数据类型，如果是json格式，在接受到返回值时会自动封装为json对象
            success:function (dta) {//data是形参名，和上面的data不是一个
                console.log(dta);//返回的是json对象

            }
        })

在这里插入图片描述

$.get 和 $.post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$get和$post</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<script type="text/javascript">
    /*
       $.get()语法
       $.get("请求地址","请求参数",function(形参){

       })
     */

    /*
      $.post()语法
       $.post("请求地址","请求参数",function(形参){

       })
     */
    $.get("js/data.txt", {}, function (data) {
        console.log(data)
    })

    $.post("js/data.txt", {}, function (data) {
        console.log(data)
    })


</script>
</body>
</html>

~~~html

$.getJSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.getJSON</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<script type="text/javascript">
    /*
       $.getJSON()语法
       $.getJSON("请求地址","请求参数",function(形参){

       })
     */

    $.getJSON("js/data.json", {}, function (data) {
        console.log(data)
    })



</script>
</body>
</html>