如何编写 AJAX 来发布数据

How do I write the AJAX to post data

本文关键字：数据 布数据 何编写 AJAX      更新时间：2023-09-26

小提琴

我正在尝试从教程中学习 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>

我猜你到底想要什么，但似乎你希望页面在第一次加载时填充数据库中当前的任何朋友，然后当你点击添加顺序按钮时，它会添加新的朋友并更新你的列表。第一件事是你正在尝试 POST 到学习代码名称，你不能这样做。将下面 URL 中显示"您的姓名"的位置更改为其他内容。这是你应该做的：

<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>

看到说的部分

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 脚本来处理 POST 数据并返回响应，该响应在 success:function(data){} 中的data参数中传递

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

<?php 

print_r($_POST); 

?>

并将成功函数更改为： 

success: function(data) {
     $("body").append("<pre>"+data+"</pre>");
}

这应该会让你走上正轨。

相关文章：