Question

我正在尝试从教程中学习AJAX。

我能够抓取我想要的数据并很容易地在DOM中填充它。

我正在努力的是使用“POST”进行编辑。

我创建了一个简单的页面，其中列出了从此处获取数据的“朋友”和“年龄”

http://rest.learncode.academy/api/learncode/friends

名称和年龄填充正确，但我写给'POST'的代码不是。

这是我的javascript

<script>
    $(function () {
        var $friends = $('#friends');
        var $name = $('#name');
        var $age = $('#age');

        $.ajax({
            type: 'GET',
            url: 'http://rest.learncode.academy/api/learncode/friends',
            success: function (data) {
                console.log("I have friends!", data); 
                $.each(data, function(i, name){
                    $friends.append('<li>name: '+ name.name + '<br />' + ' age:' + name.age +' </li>');
                })
            },
            error: function () {
                alert("error loading data");
            }
        });
        $('#add-order').on('click', function () {

        });
    });
</script>

HTML

<div class="large-12 columns" id="ajaxContainer">
    <h1>
        AJAX Container
    </h1>
    <h3>
        Friends
    </h3>
    <ul id="friends">

    </ul>
    <h3>Add a friend</h3>

    <p>
        Name:
        <input type="text" id="name" />
    </p>
    <p>
        Age:
        <input type="text" id="age" />
    </p>
    <button id="add-order"> submit</button>
</div>

Answer 1

我猜你真正想要的是什么，但似乎你希望页面填充第一次加载时当前在数据库中的朋友，然后当你点击add-order按钮时，它会添加新朋友和更新你的清单。首先，您要尝试POST到学习代码名称，这是您无法做到的。将以下网址中的“yourname”更改为其他内容。这是你应该做的：

<script>
    $(function () {
        var $friends = $('#friends');
        var $name = $('#name');
        var $age = $('#age');

        $.ajax({
            type: 'GET',
            url: 'http://rest.learncode.academy/api/yourname/friends',
            success: function (data) {
                console.log("I have friends!", data); 
                $.each(data, function(i, name){
                    $friends.append('<li>name: '+ name.name + '<br />' + ' age:' + name.age +' </li>');
                })
            },
            error: function () {
                alert("error loading data");
            }
        });
        $('#add-order').on('click', function () {


          $.ajax({
               type: 'POST',
               data: {"id":3, "age": $age.val(), "name":$name.val()},
               url: 'http://rest.learncode.academy/api/yourname/friends',
               success: function () {
                $.ajax({
                   type: 'GET',
                   url: 'http://rest.learncode.academy/api/yourname/friends',
                   success: function (data) {
                     $friends.html("");
                     console.log("I have friends!", data); 
                     $.each(data, function(i, name){
                       $friends.append('<li>name: '+ name.name + '<br />' + ' age:' + name.age +' 
</li>');
                })
            },
            error: function () {
                alert("error loading data");
            }
        });
            },
            error: function () {
                alert("error loading data");
            }
        });
        });
    });
</script>

Answer 2

参见

部分

type : "GET"

- - 将其更改为

type : "POST"

然后，url参数就是POST到 -

而你实际上并没有发送任何数据 - ！

所以，试试这个：

$(function () {
    var $friends = $('#friends');
    var $name = $('#name');
    var $age = $('#age');

    $.ajax({
        type: 'POST',
        url: 'http://yourWebsite.com/someScriptToHandleThePost.php',
        data: [{"id":1,"name":"Will","age":33},{"id":2,"name":"Laura","age":27}],
        success: function (data) {
            console.log("I have friends!", data); 
            $.each(data, function(i, name){
                $friends.append('<li>name: '+ name.name + '<br />' + ' age:' + name.age +' </li>');
            })
        },
        error: function () {
            alert("error loading data");
        }
    });
    $('#add-order').on('click', function () {

    });
});

然后，你需要一个PHP脚本来处理POSTed数据并返回一个响应，该响应在data

中的success:function(data){} param中传递

从简单的事情开始，像这样：

<?php 


print_r($_POST); 


?>

并将您的成功功能更改为：

success: function(data) {

     $("body").append("<pre>"+data+"</pre>");

}

这应该让你走在正确的轨道上......

如何编写AJAX来发布数据

2 个答案: