Ajax之jquery版

jquery版的Ajax就是将原生的js代码以jquery的形式写出来，方便了我们写代码

在jquery中已经提供了大量的Ajax网络请求的封装函数

函数名	含义
$.ajax()	jQuery 底层 AJAX 实现,$.ajax() 返回其创建的 XMLHttpRequest 对象
$.load()	载入远程 HTML 文件代码并插入至 DOM 中。
$.get()	这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数
$.getJSON()	通过 HTTP GET 请求载入 JSON 数据。
$.getScript()	通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
$.post()	通过远程 HTTP POST 请求载入信息。

$.ajax

下面是基本参数

8801C098-5736-42DD-BC86-EE5DDE76944D.png

下面就写个应用例子,该例子需要引入jquery，因此我们先引入jquery，jquery一定要在所写代码之上

js代码

<script>
$.ajax({
    type: "post",//数据提交类型
    url: "danmu.php",//请求地址
    data: {word:"abc",username:"ysh"},//发送数据
    dataType: "json",//将数据转换成json串（返回数据类型）
    async: true,//是否异步，true为异步
    // success为数据加载完后的回调函数
    success: function(data){
       for(i in data){
        $("#shows").html(data[i]+"<br>");
      } 
    }
});
</script>

html代码

<div id="shows"></div>

damnu.php代码

<?php
    //save 保存
    if(!empty($_POST['word'])){
        $word = htmlspecialchars($_POST['word']);
        $fp = fopen("danmu.txt","a+");
        fwrite($fp,$word."\n");
        fclose($fp);
        echo json_encode(array($word));
    }
?>

$.get( )

通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

23294BF3-428F-41AB-8603-D63AFE18D21B.png

getdanmu.php文件

<?php
    //为前台提供全部的弹幕数据
    $fp = fopen("danmu.txt","r");
    $danmu = array();
    while(!feof($fp)){
        $line=fgets($fp);
        if($line){
            $danmu[]=$line;
        }
    }
    fclose($fp);
    //json_encode 将字符串转换成json格式
    echo json_encode($danmu);
?>

js代码

$.get("getdanmu.php",{},function(data,status){
    console.log(data,status);
},"json")

最后显示结果：

C0203F99-E446-46AC-97C0-642F1F41F518.png

$.post( )

通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。参数与get相同

js 代码

$.post("getdanmu.php",{word:"abc"},function(data,status){
    console.log(data,status);
},"json");

结果：

85B21595-AD1F-47EA-8D6E-D9444580E690.png