jQuery(五)Ajax请求

最新推荐文章于 2019-04-16 10:28:33 发布

We_jia

最新推荐文章于 2019-04-16 10:28:33 发布

阅读量273

点赞数

分类专栏： jQuery 文章标签： ajax

本文链接：https://blog.csdn.net/We_jia/article/details/88045515

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

一、Ajax请求方法

1.ajax()方法，执行异步 AJAX 请求

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。返回json对象

//请求访问远程路径
 var src = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20"; //远程服务器地址
$.ajax({
     method:"post",
     url:src,                         //规定发送请求的 URL。默认是当前页面。
     data:"6767",                    //规定要发送到服务器的数据。
     dataType:"json",                //预期的服务器响应的数据类型。
     success:function (res){         //	当请求成功时运行的函数。
     console.log(res);
     },
     error:function (){              //如果请求失败要运行的函数。
     console.log(输出错误);
     },
     async:true                     //	布尔值，表示请求是否异步处理。默认是 true。
     })

2.get()方法，使用 AJAX 的 HTTP GET 请求从服务器加载数据

语法： $.get(URL,data,function(data,status,xhr),dataType) 返回string型

$.get(src,{
     name:"zhangsan"
     },function (res){
     console.log(JSON.parse (res));    // 使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
     })*/

3.post()方法，使用 AJAX 的 HTTP POST 请求从服务器加载数据 返回string型

语法：$(selector).post(URL,data,function(data,status,xhr),dataType)

 $.post({
        url:src,
        dataType:"json",
        success: function (res) {
            console.log(res);
        }
    })

4.getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。 返回json对象

语法：$(selector).getJSON(url,data,success(data,status,xhr))

$.getJSON (src,{
     age:13
     },function (res){
     console.log(res);   //不用再转换成json
     })

二、调用本地API接口案例--简易的文章发表和浏览

1.编写简单的HTML页面（文章发表）

2.利用jquery ajax调用本地API接口，将页面中的数据添加到数据库中;

利用$.ajax()方法访问数据；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<select id="sel">
    <option>—请选择类型—</option>
</select>
<ul>
    <li>大标题：<br/><input type="text" class="bigtitle"/></li>
    <li>小标题：<br/><input type="text" class="smalltitle"/></li>
    <li>内容：<br/><textarea class="content"></textarea></li>
    <li>
        <button id="btn">发表</button>
    </li>
</ul>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //网页加载的时候 请求类型
    $.ajax({
        method: "post",
        url: "http://localhost:80/selectType.php",
        dataType: "json",
        success: function (res) {
            for (var i = 0; i < res.length; i++) {
                console.log(1);
                var op = $("<option></option>");
                op.html(res[i].type);
                op.val(res[i].id);
                $("#sel").append(op);
            }
        }
    });

    //点击发表
    $("#btn").click(function () {
        var type = $("#sel").val();
        var bigtitle = $(".bigtitle").val();
        var smalltitle = $(".smalltitle").val();
        var content = $(".content").val();
        var time = new Date().toLocaleString();
        $.ajax({
            method: "post",
            url: "http://localhost:80/sendblog.php",
            data: {big: bigtitle, small: smalltitle,  content: content,time: time, type: type},
            success: function (res) {
                if (res == "success") {
                    console.log(1);
                    alert("发表成功！");
                }
            }
        });

    });

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

评论文章

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="block"></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $.ajax({
        mothod: "post",
        url: "http://localhost:80/selectblog.php",
        dataType: "json",
        success: function (res) {
            if (res) {
               for(var i=0;i<res.length;i++){
                   var p=$("<div class='blog'></div>");
                   p.prop("data-id",res[i].blogid);
                   p.html(res[i].blogid+"/"+res[i].bigtitle+"/"+res[i].times+"/"+res[i].type+"<br/>");
                   $(".block").append(p);
                   var btn = $("<button>评论</button><br/>");
                   $(p).append(btn);
                   btn.bind("click", function () {
                       var txt = $("<textarea></textarea>");
                       $(this).parent().append(txt);
                       var send = $("<button>发表</button>");
                       $(this).parent().append(send);
                       send.bind("click", function () {
                           var bid = $(this).parents(".blog").prop("data-id");
                           var time = new Date().toLocaleString();
                           var comment=$(this).siblings ("textarea").val();
                           $.ajax({
                               method: "post",
                               url: "http://localhost:80/comment.php",
                               data: {bid: bid, uid: 3, time: time, content: comment},
                               success: function (res) {
                                   if(res=="success")
                                   {
                                       alert("评论成功！");
                                   }
                               }
                           })
                       })
                   })
               }
                }
            }
    })
</script>
</body>
</html>

We_jia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery(五)Ajax请求

AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。一、Ajax请求方法1.ajax()方法，执行异步 AJAX 请求所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。返回json对象//请求访问远程路径 var src = "http://www.phonegap100.com/a...
复制链接

扫一扫