基本ajax,尝试将数据POST到本地api文件

时间:2014-08-20 22:28:27

标签: jquery ajax

我按照https://www.youtube.com/watch?v=5nL7X1UMWsc&index=8&list=PLoYCgNOIyGABdI2V8I_SWo22tFpgh2s6_http://rest.learncode.academy/的说明进行操作。

我正在尝试将数据发布到我的本地API文件。

以下代码不能与我的localhost / api / friends文件一起使用,但如果我将网址更改为http://rest.learncode.academy/api/johnbob/friends,则效果非常好。

我在deverloper工具下检查了网络,它确实对数据进行了POST,但数据没有写入文件,也没有返回我刚发布的数据。

$(function(){

    var $friends = $('#friends');

    $.ajax({    
        type: 'GET',
        url: 'http://localhost/ajax/api/friends',
        success: function(friends){
            console.log('succuess', friends);
            $.each(friends, function(i, friend){
                $friends.append('<li>id: ' + friend.id + ', name: ' + friend.name +', age: ' + friend.age + '</li>');
            });
        }
    });

    $('#add-friend').on('click', function(){
        var friend = {
            id: $id.val(),
            name: $name.val(),
            age: $age.val()
        };

        $.ajax({
            type: 'POST',
            url: 'http://localhost/ajax/api/friends',
            data: friend,
            success: function(newFriend){
                console.log('succuess', newFriend);
            } 
        });

    });

这是我的api / friends文件的样子

[{"id":1,"name":"Will","age":33},{"id":2,"name":"Laura","age":27}]

控制台日志打印

succuess [{"id":1,"name":"Will","age":33},{"id":2,"name":"Laura","age":27}] 

它不会将我刚刚POST的数据返回到文件中。

1 个答案:

答案 0 :(得分:1)

我不知道为什么GET正在为localhost工作,但是如果你没有任何作为后端运行的东西,那么POST不应该工作

基本上,JavaScript / JQuery是在您的浏览器中运行的代码,可以更改界面并可以动态更改页面,例如,当您单击按钮时向/从部分内容添加/删除内容。

服务器代码向您发送此html / javascript。

服务器代码将有权在数据库/文件上写入以更改其值或只是获取它们并将它们提供给您。

使用ajax,您可以使用js从服务器动态获取内容。您向服务器发送请求,该服务器运行服务器代码(并根据需要更改数据库值)并返回javascript代码的一些信息,用于更改网站的外观。