如何編寫AJAX來發布數據

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

我正在猜測您的實際需求，但似乎您希望該頁面在第一次加載時填充數據庫中當前存在的所有朋友，然后單擊添加順序按鈕時，它將添加新朋友並更新您的列表。 第一件事是您嘗試將POST張貼到learningcode名稱，但是您不能這樣做。 將以下網址中顯示“您的姓名”的位置更改為其他名稱。 這是您應該做的：

<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荷蘭國際集團TO-

而且您實際上並沒有發送任何數據-！

因此，請嘗試以下操作：

$(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腳本來處理POST數據並返回響應，該響應將success:function(data){}傳遞到data參數中success:function(data){}

從簡單的東西開始，像這樣：

<?php 


print_r($_POST); 


?> 

並將您的成功功能更改為：

success: function(data) {

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

} 

那應該可以讓您走上正確的道路。